这篇文章的目的是帮助自己复习，还有写东西的时候的思路。
Paste_Image.png
首先我们看一下制作一个轮播的思路:
- 先把轮播的HTML和CSS给写好，这一步就不多讲，本文章主要讲的是JS的实现。
- 既然是无缝的轮播，那么首先图片就要排成一排
- 有一个视口，超出视口的图片要隐藏（在CSS实现，
overflow：hidden） - 滚动的时候视口进行偏移，偏移到下个图片
-
到最后一张（或第一张往前）的时候，要连续的滚动，而不是瞬间回滚到第一张
有了思路就可以开始实现JS了
先附上HTML结构：
<body>
<div class="ct">
<ul class="img-ct">
<li><a href="#"><div></div></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<a class = 'pre arrow' href="#"><</a>
<a class = 'next arrow' href="#">></a>
<ul class="nav">
<li class = 'setcolor'></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
首先我们写效果的第一步是什么？就是拿到相应的DOM节点
var $ct = $('.img-ct'), //获取视口节点
$items = $ct.children(), //获取视口下需要轮播的图片元素
$pre = $('.pre'), //获取上一张功能按钮
$next = $('.next'), //获取下一张功能按钮
imgWidth = $items.width(),//获取滚动元素的宽
imgCount = $ct.children().size(),//获取有多少个滚动的元素
下面的代码是要实现思路4，5的核心，很重要！
$ct.prepend($items.last().clone()),
$ct.append($items.first().clone());
imgnewwidth = $ct.children().size();
$ct.css({left:0-imgWidth,width:imgnewwidth*imgWidth})
- 第一行首先获取到轮播图片元素的最后一张然后clone，然后将clone后的副本prepend到视口的第一个
- 第二行同理，把第一张clone一下append到最后面
- 第三行重新计算元素的数量，原本是4个。现在变成了6个（这里要注意！重新计算数量要重新查找DOM元素，不能直接利用上面的
$items.size来计算，要重新使用$ct.children().size），不然还是4张！） - 第四行设置视口的初始位置和它的总宽度
然后元素的排列就变成了如下视口图（自己画的有点丑）
Paste_Image.png
其中数字代表的是图片的顺序，因为我们上面设置了视口的初始位置（left:0-imgWidth这里我给设置的图片宽度为500px），那么初始位置就变成了-500px，那么显示的图片就是第一张了（按上面那张图就是第二张）。
接下来开始绑定事件，我们想实现一个功能的时候，要先想能做什么，在去想要怎么做：
$next.on('click',function(){
playnext();
})
$pre.on('click',function(){
playpre();
})
这里我们为前进和后退按钮绑定了事件，当我点前进按钮的时候就会执行playnest函数，然后我们下面再想playnext函数的实现。
var curidx =0;//声明初始的坐标
var mov = 1;//移动的次数
function playnext(){
$ct.animate({left:'-='+mov*imgWidth},function(){
//当点击后，会执行这个动画，把视口向右移动一个图片宽度的距离，就刚好像滚动一样
curidx+=mov;//然后坐标加1，表明移动一格
if(curidx===imgCount){
$ct.css({left:0-imgWidth});
curidx=0;
}
//如果已经移动到了最后一张图片，也就是末尾clone的1图片，就马上将视口设置为刚开始那样，因为同一张图片的变换人是看不出来的，然后再把坐标给设置回0.
})
}
反之，后退按钮是一样的：
function playpre(){
$ct.animate({left:'+='+mov*imgWidth},function(){
curidx-=mov;
if(curidx===(-1)){
$ct.css({left:0-imgWidth*imgCount});
curidx=3;
}
})
}
