這篇文章的目的是幫助自己復習，還有寫東西的時候的思路。
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;
}
})
}
