html5+css3实现图片自动切换

html-css07

html5+css3实现图片自动切换,第1张

既然楼主的问题竟然一年没找到满意答案……

不才刚刚开始学css3,愿意跟楼主分享一下图片切换心得。 如果楼主现在已经找到了解决方案,那请楼主无视我的答案。

首先,lp52761十五级大神的答案貌似不是很确切,其实css3+html5非常强大,基本上可以脱离js,除非要做出能响应移动设备触屏事件的网站,或者我的观点也落伍了,html5+css3也可以做出触屏响应特效。

我看csdn右侧图片切换有点类似opacity的变化,那么楼主不妨用keyframes方法在opacity上做文章;例如:

先定义一个keyframe

@keyframes qiehuan {

30%{opacity:1}

60%{opacity:0}

}

之后为图片容器做一个类:

.container{

/*这里长宽高边框边距之类的东西你自己随便写。*/

}

然后为你的图片们定义专属类:

.tupianmen{

position:absolute

//此处调用keyframe方法

animation:qiehuan 20s infinite

opacity:0

}

然后用css3独有的nth-child选择器来选择你要切换的图片

img:nth-child(4){animation-delay:0s}

img:nth-child(3){animation-delay:5s}

img:nth-child(2){animation-delay:10s}

img:nth-child(1){animation-delay:15s}

接下来你就可以写html了:

<!DOCTYPE html>

<html>

...... 略掉杂七杂八的东西......

<div class="container">

<img class="tupianmen" src="你的图片1" />

<img class="tupianmen" src="你的图片2" />

<img class="tupianmen" src="你的图片3" />

<img class="tupianmen" src="你的图片4" />

</div>

</html>

写完之后保存,查看效果如何

对了,差点忘了,如果用不同浏览器的话,可能需要简单更改一下keyframe或者animation的前缀,比如加一个-webkit-才行。

望采纳。。。

看你是如何实现的

一般来说,增加动画可以使用:animation ,想要过渡的话使用transition.

transition: 参考 http://www.w3school.com.cn/cssref/pr_transition.asp

animation:参考 http://www.w3school.com.cn/cssref/pr_animation.asp

W3school资料还是很好的。