使用JS创建无缝轮播图（防淘宝、京东等）

今天我们使用原生的JavaScript来模仿一个京东等一些网站的无缝轮播图。效果如下：（图片放上来好像有点卡顿，请见谅）

无缝轮播图

分析：5张图片结束后，第六张出现的图片还是第一张，为了不使中间会出现一张空白的那么在第5张的后面会在填补一张第一张图片。

分析效果图

首先还是先写html+css的布局：

1

*{

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.找对象

js代码1

2.先克隆第一张图片添加在ul的最后（注意的是，ul的宽度应该改成6张图片的宽度）

js代码2

3.动态创建指示器 4.让ol中的第一个li选中

js代码4

5.利用排他思想做手动轮播，并让轮播走起来

5

7.自动轮播   

8.让自动轮播的指示器走起来   

 9.判断自动轮播中的指示器范围

6 7

10.最后，当鼠标进入轮播图的时候，让定时器清掉，当鼠标离开的时候，应该继续走起来

8

github地址：github.com/guoshilin/-js-/commit/6a1a3a6a2d533be596e0d83d13de5f7247af32a2