Jquery 轮播

HTML

 // 轮播容器

   // 图片容器
  
< img src=" 1 "  alt="" />
  
< img src=" 2 "  alt="" />
  
< img src=" 3 "  alt="" />
  
< img src=" 4 "  alt="" />


 // 按钮容器
  
  < 
  
 > 


 // 下标容器
  

  

  

  

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)

• demo

• 问题
  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)

• demo

• 问题
  1 图片如何放置？
  img：position：absolute； 重叠放在父容器内