無縫滾動的原理：假設輪播區域有7張圖片進行輪播，當第一張圖片向左移動後，輪播區域尾部必然會有空缺的區域；爲了不讓不能播區域有空缺，我們可以在佈局的7張圖片後面再加上7張同樣的照片，當第一張圖片向左移動後，第八張圖片就會補位到輪播區域的第7個位置。然而這樣只能實現一次的輪播，那麼我們就考慮 使用定時器來實現無限循環。（實現步驟如下）
一、首先先佈局
準備一個盒子box作爲輪播區域，然後 盒子裏面用ul裝着li標籤，li標籤爲每個要輪播的圖片（用img標籤放圖片也可以，我這裏只做簡單演示而已；還有上面說到的輪播區空缺補位的圖片也是用js代碼寫出來，佈局和樣式不需要寫）；
二、寫JS代碼實現滾動
在佈局和樣式完成的前提下，編寫js代碼：
<!DOCTYPE html><html>
<head>
<meta charset="UTF-8">
<title>無縫滾動</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 700px;
height: 150px;
margin: 50px auto;
background: lawngreen;
position: relative;
overflow: hidden;
}
#box ul{
width: 1400px;
height: 150px;
position: absolute;
left: 0;
}
#box ul li{
width: 100px;
height: 150px;
border: 1px solid #000000;
box-sizing: border-box;
float: left;
text-align: center;
line-height: 150px;
font-family: "微軟雅黑";
font-size: 50px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var oPic_box=document.getElementById('pic_box');
var aLi=oPic_box.getElementsByTagName('li');
oPic_box.innerHTML=oPic_box.innerHTML+oPic_box.innerHTML;//補位空缺區域的ul
oPic_box.style.width=aLi[0].offsetWidth*aLi.length+'px';//裝着li的ul的寬，這樣寫是爲了方便；假如輪播圖片爲8張，那麼這樣寫就不用去樣式裏面改ul的寬度了
var timer=null;
var speed=-2;
timer=setInterval(function move(){
if (oPic_box.offsetLeft<-oPic_box.offsetWidth/2) {
oPic_box.style.left=0+'px';
} else if(oPic_box.offsetLeft>0){
oPic_box.style.left=-oPic_box.offsetWidth/2+'px';
}
oPic_box.style.left=oPic_box.offsetLeft+speed+'px';
},30);
};
</script>
</head>
<body>
<div id="box">
<ul id="pic_box">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>
以上實例是向左輪播的代碼；輪播還可以擴展到其他知識點，比如，我可以添加兩個按鈕，一個向左，一個向右，當點擊向左，圖片向左運動，反之向右運動；還有當鼠標移入輪播區域，輪播停止等等。
