1. 前言
轮播插件是js最常见的插件之一，本次试验，加入的需求有：
. 自动播放模式
. pre next摁键查看====》2000ms后恢复自动播放模式
. 跳转模式：点击页面下方预览栏，点击后高亮，之间跳转对应图片， 2000ms后恢复自动播放模式
2.let's shit out of this!
2.1 原理
想象你通过一扇窗户观察外面跑过的列车，列车可以左右通过，你通过摁键控制火车方向，这里火车就是拍成一排的图片，窗户就是我们观察的实际页面窗口。这里有一个问题：为了满足循环播放，照片不可能是无限长度。
解决方法有2:
1.操作dom元素，将最后一张图片遍历后移到第一张图片之前，依次类推，但问题是重新绘制dom造成网页刷新，得不偿失。
2.将最后一张图片复制到第一张图片之前，原来第一张图片到最后一张图片之后，然后我们制造一个标志位：currentPage 并计数，当点击nextBt，则+1，反之则-1，当到达边界图片时，先显示我们的复制图片，然后直接操作dom元素的css瞬间位移到初始正确位置。
搞定
2.2 what it looks like？
talk is cheap，lets shit the code
基本页面结构如下：
<body>
<div class="carousel-ct">
<ul class="carousel">
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
<li>
<a href="#"></a>
</li>
</ul>
<ul class="thumbnail">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="" class="btnpre"><i class="fa fa-chevron-left" aria-hidden="true"></i></a>
<a href="" class="btnnext"><i class="fa fa-chevron-right" aria-hidden="true"></i></a>
</div>
css重要部分（完整部分见下文git链接）：其实虽然也没什么可重要的。。。照屏幕调试而已
.carousel-ct{
width: 1000px;
overflow: hidden;
margin:0 auto;
position:relative;
height:560px;
}
.carousel{
width: 6000px;
position:absolute;
}
.carousel>li {
float: left;
}
.carousel img{
width:1000px;
}
.thumbnail{
width: 610px;
position:absolute;
left:50%;
bottom:0px;
transform: translateX(-50%);
z-index:10;
}
.thumbnail>li{
display: inline-block;
opacity: 0.5;
cursor: progress;
}
.thumbnail>li:hover{
opacity: 1;
}
.thumbnail>li>img{
width:80px;
}
.active{
opacity: 1 !important;
}
重点来了！js中的前进，后退，自动播放功能函数：
function playNext(){
$imgCt.animate({left:'-=1000'},
function(){
curPageIndex++;
thumbnail(curPageIndex);
if(curPageIndex===imgLength){
$imgCt.css({'left':'-1000px'});
curPageIndex=0;
}
})
}
function playPre(){
$imgCt.animate({left:'+=1000'},
function(){
curPageIndex--;
thumbnail(curPageIndex);
if(curPageIndex<0){
$imgCt.css({'left':-(imgLength*$firstImg.width())});
curPageIndex=imgLength-1;
}
})
}
function autoplay(){
timer = setInterval(function(){playNext();},4000);
}
function stopAuto() {
clearInterval(timer);
}
function remainplay(){
setTimeout(function(){autoplay();},2000);
}
function thumbnail(index) {
$thumbnail.children().removeClass('active');
$thumbnail.children().eq(index).addClass('active');
}
3.预览：
Screen Shot 2017-02-22 at 3.59.16 PM.png
github：下载后直接点击html文件即可查看
预览地址：jsbin
网友评论