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"> // 下标容器
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
CSS
.slide-ct 轮播容器，作为窗口负责show // position：relative; overflow: hidden;
.img-ct 图片容器，充满整个窗口位置 // position:relative;
.btn-ct 按钮容器，基于窗口中间位置 // position: absolute; top:50%;
.dots 下标容器，基于窗口下方位置 // position: absolute;bottom:10px;
JS
无缝
原理：
clone首图放入父容器末；clone尾图放入父容器头。
丨 show 丨
clone(img4)丨 img1 丨 img2 丨 img3 丨 img4 丨 clone(img1) 首尾相连，形成循环核心：
到达clone位置的时候，切换到原图位置
丨 show 丨--------切回 ↑
clone(img4)丨 img1 丨 img2 丨 img3 丨 img4 丨 clone(img1)
问题
1 图片如何放置？
img:{ float:left } ↑ 图片浮动，在父容器中连城一排
img-ct 宽度 = img宽度 * (img-ct子元素个数+2) clone后子元素增加2个，宽度需要重新计算
2 如何切换位置？
if(curPageIndex === imgLength){ 当下标 = 子元素个数，到达最右需要切换
$('.img-ct').css({left:-$('img').width()}); 利用position定位，改变left数值
curPageIndex = 0; 下标回到队首，开始重新计数
}
3 防止连续点击？
使用状态锁
var isAnimate = false;
function play(){
if(isAnimate) return;
isAnimate = true;
function done(){
do something...；
isAnimate = false;
}
}
4 自动播放
5 下标添加事件
6 鼠标移入暂停
淡入淡出/自动播放
原理
上一张fadeOut，下一张fadeIn；
自动播放setInterval，停止播放clearInterval。核心
如何确定播放页
nextpage (curidx+1)%imgLength
perpage (imgLength+curidx-1)%imgLength)问题
1 图片如何放置？
img：position：absolute； 重叠放在父容器内
