html5+css3实现图片自动切换-ZOL问答

7个回答默认排序

默认排序

按时间排序

已采纳

css不可能做到动态效果的，像类似弹出框出现隐藏的效果也并非动态，只是一个假象而已，css只能做静态页面；
不要太强调或者纠结js的问题，没人会说网页设计不准用js或者用了js就不好了，只是因为运用了js后会稍微影响页面的加载速度而已，但是如果你又想要效果好又不想用js，那还真没办法，从视觉美感角度上来看，很难做到

取消评论

图片素材推荐

!DOCTYPE html
html lang=en
head
meta charset=UTF-8
script type=text/javascript src=jquery-3.2.1.js/script
title轮播特效/title
style
.box1{
width:200px;
height:300px;
border:1px dotted black;
background: #aaa;
overflow: hidden;
}
.item{
width: 198px;
height:200px;
border:1px solid red;
float:left;
background:#ff00cc;
}
.cont{
width:1000px;
position:relative;
}
/style
/head
body
div class=box1
div class=cont
div class=item index=00000/div
div class=item index=11111/div
div class=item index=22222/div
div class=item index=33333/div
div class=item index=44444/div
/div
/div
/body
script type=text/javascript
var index=0;
$(.box1).on(click,function(){
var curr=(index++)%5;
console.log(1111);
$(.cont).animate({left:-200px},1000,function(){
$(.cont).css(left,0);
$(.item[index=+ curr +]).appendTo($(.cont));
});
});
/script
/html

取消评论