传统轮播
苹果风格
无缝轮播

旧版思路：

使用排队思维实现，即多人跳大绳思维，当前第一张离开后，立即进入轮播区的等进入区域

注：图片的宽和高很重要，最好写在标签内

• 使用 jQuery 获取到的伪数组使用时，v[i] 是 DOM 对象，需要对其进行封装为 jQuery 对象，即 $(v[i]) 或者 v.eq(i)
• jQuery获取当前索引方法：$().index()
• jQuery中 x.trigger('动作名不加on') 自动触发事件
• jQuery的链式操作（因为jQuery源码中都有：return this ）：

v.eq(i).trigger('动作名不加on')
  .addClass('类名') //给v.eq(i)加类名
  .silibings('.类名').removeClass('类名') //找到它的所有兄弟（**必须加点**）

新版本轮播

即实现无缝轮播，又能实现跳转

思路：

在点击最后一张，再去点击第一张时，用户先看到假的第一张，在看到真的第一张，即假的出现时，立即替换为真的（利用用户的错觉），从第一张到第三张同理。简单理解：在第一张前放一个假的最后一张；在最后一张后放置假的第一张并且使用位移实现

替换过程：

$(`.window>img:nth-child(${xn(x)})`).removeClass('current').addClass('leave')
       .one('transitionend',function (x) {
              $(x.currentTarget).removeClass('leave').addClass('enter')
        });
$(`.window>img:nth-child(${yn(y)})`).removeClass('enter').addClass('current');

其中 xn(x) ， yn(y) 是分别按照1,2,3,1,2,3和2,3,1,2,3,1出数，通过设置定时器可实现自动轮播

function xn(x) {
    if (x>3){
        x=x%3;
        if (x===0){
            x=3
        }
    }
   return x
}
function yn(y) {
    if (y>3){
        y=y%3;
        if (y===0){
            y=3
        }
    }
    return y
}

bug

由于 setInterval() ，当不在当前轮播页面时，计时器会运转，但是图片不会滚动，再次打开此页面时，会出现混乱的状态
解决方案：给当前页面添加 visibilitychange 监听事件

document.addEventListener('visibilitychange',function(){
   if (document.hidden){
       window.clearInterval(timeId)
   }else{
       timeId=setInterval(function () {},1000);
   }
})

其中 document.hidden 不在当前页面时为 true ，反则为 false