进阶17

题目1： 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口)供使用？（比如 play()）
原理：

image.png

  <div class="div-a">
    <div class="div-b">
      <li class="li-img">0</li>
      <li class="li-img">1</li>
      <li class="li-img">2</li>
      <li class="li-img">3</li>
    </div>
  </div>

1、htm css部分：里面四个轮播元素是浮动的，要想使四个甚至更多的li水平排列，必须让.div-b的宽度大于等于所有li的宽度之和，如果不大于，有的li将在下一行，后续实现滑动时通过animate,设置left属性，最后一页在可视的窗口显示不出来，.div-a的得宽度为一个Li的宽度，overflow：hidden;
这样就制作了一个“窗口”
2、js部分：属性先克隆最后一个li和第一li，分别添加到div-b的头部和尾部，这样做的目的是制作一种滑动的假象，最后一块向第一块切换，只能通过设置css(left),但是这样做达到目的，没有滑动效果
animate({left:'+='+imgs.width()},time)过一定的时间让left在原来的基础增加或减少，从而用动画的效果
这里需要注意的一点是

function(){
$('.ct-ul').animate({left:'-='+imgs.width()*len},1000,function(){
                              console.log(1)
                })
console.log(2)
}
//结果是2,1

animate中的complete函数执行的效果与setTimeOut()类似
动画执行完了才执行complete函数，动画一开始执行这条语句就执行好了，开始执行下一条语句，后续在设置imgPage和全部变量boolean 时应该注意这点，还有就是设置imgPage的时候，应该明确保证imgPage应该是记录我们展示的是第几张图片，图片改变，imgPage也应该随之变化
抽象的接口，其实这些语句有很多类似的地方，可以将nextImg（）和prevImg(）合并，这个函数的作用就是展示不同的图片，后面的自动轮播，和点击下方的按钮，都可以通过传入参数的方式调用这个函数
2,设置底部按钮的css

 function setClass(x){
                $('.btn-order').removeClass('active')
                x.addClass('active')
              }

3设置定时器也可以封装到函数里面

function setClock(){
            if(clock){
                clearInterval(clock)
            }
            clock=setInterval(function(){
                nextImg(1)
            },3000)
           }

题目2： 实现视频中的左右滚动无限循环轮播效果
github滑动轮播效果
题目3： 实现一个渐变轮播效果, 效果范例269
github渐变轮播效果