上代码：
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid blue;
overflow: hidden;
/*overflow:hidden;这个很关键*/
position: relative;
margin: 50px auto;
}
ul li{
position: absolute;
list-style-type: none;
width: 200px;
height: 200px;
top:0px;
left:0px;
transition: all 0.5s;
/*使用transition这里关键*/
}
img{
width: 100%;
height: 100%;
}
</style>
<body>
<div>
<ul id="showImg">
<li><img src="./img/1.jpg"></li>
<li><img src="./img/2.jpg"></li>
<li><img src="./img/3.jpg"></li>
<li><img src="./img/4.jpg"></li>
<li><img src="./img/5.jpg"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var ul = document.getElementById('showImg');
ul.appendChild(ul.children[0].cloneNode(true));
//把第一个节点复制添加到最后
li = document.getElementsByTagName('li');
function init(){
for(var i=0;i<li.length;i++){
li[i].style.left = 200*i +'px';
}
}
init();
var index = 0;
function main(){
var t1 = setInterval(function(){
for(var j = 0;j<li.length;j++){
li[j].style.transition = 'all '+0.5+'s';
li[j].style.left = (j-index)*200+'px';
}
if(index<li.length-1){index+=1;}
else{
setTimeout(function(){
index=0;
for(var j = 0;j<li.length;j++){
li[j].style.transition = 'all '+0+'s';
li[j].style.left = j*200 +'px';
}
},500);
}
},1000);
}
main();
</script>效果是每1s切换一下，过渡时间0.5秒，到最后一张之后，下一秒切换到首张，无缝切换。
知识点：
解决图片轮播，首先包裹div需要overflow:hidden;然后是对每个li标签设置transition，这样代码里面直接对left赋值，表现就会是过渡效果。当然，整体是position:absolute方式。
设定一个定时器，每次让所有li左移一定距离即可。
问题就出在移到最后一个图片的时候，通常的处理是直接全部移回初始的位置，这样的效果就是像倒带一样快速返回第一张，但是注意全程trasition,所以要无缝切换，做成仿佛最后一张的下一张就是第一张怎么做呢？
我自己的思路是一开始就把第一张复制然后放在所有图的最后面，然后当到最后一张的时候，过渡时间一过，立马关闭过渡这个属性，把所有图片移回最初的状态。
唯一的问题是第一张比其他几张停留的时间长，这个我准备进一步研究吧。
102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
