html5+css3实现图片自动切换 50
像csdn首页右侧的图片自动切换效果一样，只不过不用js而用css能实现吗？并且运行平顺，还能手动切换图片。哪位大神给予指导，如果代码较长，可发我邮箱searchthef...
像 csdn首页 右侧的图片自动切换效果一样，只不过不用js而用css能实现吗？并且运行平顺，还能手动切换图片。哪位大神给予指导，如果代码较长，可发我邮箱searchthefish@163.com O(∩_∩)O谢谢! 采纳后追加更多分
我是看了css3的animation 这个功能想到用这个做的，试了一下，不知道循环播放的首尾衔接问题该怎么有效解决，还有很多细节问题，所以看看有没有大神能做 展开
我是看了css3的animation 这个功能想到用这个做的，试了一下，不知道循环播放的首尾衔接问题该怎么有效解决，还有很多细节问题，所以看看有没有大神能做 展开
5个回答
展开全部
既然楼主的问题竟然一年没找到满意答案……
不才刚刚开始学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-才行。
望采纳。。。
不才刚刚开始学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-才行。
望采纳。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css不可能做到动态效果的，像类似弹出框出现隐藏的效果也并非动态，只是一个假象而已，css只能做静态页面；
不要太强调或者纠结js的问题，没人会说网页设计不准用js或者用了js就不好了，只是因为运用了js后会稍微影响页面的加载速度而已，但是如果你又想要效果好又不想用js，那还真没办法，从视觉美感角度上来看，很难做到
不要太强调或者纠结js的问题，没人会说网页设计不准用js或者用了js就不好了，只是因为运用了js后会稍微影响页面的加载速度而已，但是如果你又想要效果好又不想用js，那还真没办法，从视觉美感角度上来看，很难做到
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个理论是可以实现的，原理是采用不同的a标签的hover事件触发div的背景切换。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
请问你解决了吗 我也遇到了相似问题
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
