今天我們使用原生的JavaScript來模仿一個京東等一些網站的無縫輪播圖。效果如下：（圖片放上來好像有點卡頓，請見諒）
分析：5張圖片結束后，第六張出現的圖片還是第一張，為了不使中間會出現一張空白的那么在第5張的后面會在填補一張第一張圖片。
首先還是先寫html+css的布局：
*{
margin:0;
padding:0;
}
img{
vertical-align:top;
}
#box{
width:750px;
height:320px;
border:1px solid#cccccc;
margin:50px auto;
padding:10px;
position:relative;
}
#box_top{
width:100%;
height:100%;
position:relative;
overflow:hidden;
}
#box_topul{
width:4500px;
position:absolute;
}
#box_topul li{
list-style:none;
float:left;
}
#olTag{
width:180px;
position:absolute;
bottom:20px;
right:20px;
/*background-color:red;*/
}
#olTagli{
list-style:none;
float:left;
width:30px;
height:30px;
border-radius:15px;
background-color:skyblue;
margin-left:5px;
text-align:center;
line-height:30px;
}
#olTag.current{
background-color:#ffffff;
}
下面是js的代碼，這里我就不做多的解釋了，直接來代碼，代碼中我都有注解。
1.找對象
2.先克隆第一張圖片添加在ul的最后（注意的是，ul的寬度應該改成6張圖片的寬度）
3.動態創建指示器 4.讓ol中的第一個li選中
5.利用排他思想做手動輪播，并讓輪播走起來
7.自動輪播 ??
8.讓自動輪播的指示器走起來 ??
?9.判斷自動輪播中的指示器范圍
10.最后，當鼠標進入輪播圖的時候，讓定時器清掉，當鼠標離開的時候，應該繼續走起來
github地址：github.com/guoshilin/-js-/commit/6a1a3a6a2d533be596e0d83d13de5f7247af32a2
