原理

轮播图的原理就是:

  1. 父盒子的overflow:hidden 2

  2. 子盒子多图拼接

  3. 定时改变left

  4. 播放完毕从头开始

    但是要实现无缝的播放,关键是让用户感受不到播放到尾部再跳转的感觉,所以正确做法是首图多复制一份放在尾部。

布局

your text

your text

<div class="father">
<ul id='scroll'>
<li><img src="images/1.png" alt="" /></li>
<li><img src="images/2.png" alt="" /></li>
<li><img src="images/3.png" alt="" /></li>
<li><img src="images/4.png" alt="" /></li>
<li><img src="images/5.png" alt="" /></li>
<li><img src="images/1.png" alt="" /></li>
</ul>
</div>
*{
padding: 0;
margin: 0;
}
.father{
width: 400px;
height: 200px;
position: relative;
margin: 50px auto;
border: 2px solid #999;
overflow: hidden;
}
.father ul{
width: 600%;
list-style: none;
position: absolute;
background: pink;
}
.father li{
float: left;
width: 400px;
height: 200px;
}
window.onload = function  (argument) {
function $(id) { 
return document.getElementById(id);
}
var left = 0;
function Myscroll(){
var timer = setInterval(function(){
left -= 100;
if(left < -2000){
left = -100;    //根据你每次left减少的值定
}
$('scroll').style.left = left+'px';
},100)
}
Myscroll();
}

效果

  1. 100ms,left每次变化-100,然后left跳转到0,这时候很明显能感到跳到首页的一个卡顿

    your text

    1. 把left重置为-100,解决问题

      your text

    当然,你也可以让滚动速度慢一点,调整left每次变化的值,调整时间间隔就好了