HTML
<div class="slide-ct"> // 輪播容器
<ul class="img-ct"> // 圖片容器
<li><a href=" ">< img src=" 1 " alt="" /></a></li>
<li><a href=" ">< img src=" 2 " alt="" /></a></li>
<li><a href=" ">< img src=" 3 " alt="" /></a></li>
<li><a href=" ">< img src=" 4 " alt="" /></a></li>
</ul>
<ul class="btn-ct"> // 按鈕容器
<li class="left"> < </li>
<li class="right"> > </li>
</ul>
<ul class="dots"> // 下標(biāo)容器
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
.slide-ct 輪播容器网严，作為窗口負(fù)責(zé)show // position：relative; overflow: hidden;
.img-ct 圖片容器，充滿整個(gè)窗口位置 // position:relative;
.btn-ct 按鈕容器艳汽，基于窗口中間位置 // position: absolute; top:50%;
.dots 下標(biāo)容器猴贰，基于窗口下方位置 // position: absolute;bottom:10px;
JS
無(wú)縫
原理：
clone首圖放入父容器末；clone尾圖放入父容器頭河狐。
丨 show 丨
clone(img4)丨 img1 丨 img2 丨 img3 丨 img4 丨 clone(img1) 首尾相連米绕，形成循環(huán)核心：
到達(dá)clone位置的時(shí)候，切換到原圖位置
丨 show 丨--------切回 ↑
clone(img4)丨 img1 丨 img2 丨 img3 丨 img4 丨 clone(img1)
問(wèn)題
1 圖片如何放置馋艺？
img:{ float:left } ↑ 圖片浮動(dòng)栅干，在父容器中連城一排
img-ct 寬度 = img寬度 * (img-ct子元素個(gè)數(shù)+2) clone后子元素增加2個(gè)，寬度需要重新計(jì)算
2 如何切換位置捐祠？
if(curPageIndex === imgLength){ 當(dāng)下標(biāo) = 子元素個(gè)數(shù)碱鳞，到達(dá)最右需要切換
$('.img-ct').css({left:-$('img').width()}); 利用position定位，改變left數(shù)值
curPageIndex = 0; 下標(biāo)回到隊(duì)首踱蛀，開(kāi)始重新計(jì)數(shù)
}
3 防止連續(xù)點(diǎn)擊窿给？
使用狀態(tài)鎖
var isAnimate = false;
function play(){
if(isAnimate) return;
isAnimate = true;
function done(){
do something...；
isAnimate = false;
}
}
4 自動(dòng)播放
5 下標(biāo)添加事件
6 鼠標(biāo)移入暫停
淡入淡出/自動(dòng)播放
原理
上一張fadeOut星岗，下一張fadeIn填大；
自動(dòng)播放setInterval，停止播放clearInterval俏橘。核心
如何確定播放頁(yè)
nextpage (curidx+1)%imgLength
perpage (imgLength+curidx-1)%imgLength)問(wèn)題
1 圖片如何放置允华？
img：position：absolute； 重疊放在父容器內(nèi)
