今天我们使用原生的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
网友评论