轮播的实现

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

    <div class="carousel">
        <ul class="img-ct clearfix">
            <li><a href="#">![](images/slide1.png)</a></li>
            <li><a href="#">![](images/slide2.png)</a></li>
            <li><a href="#">![](images/slide3.png)</a></li>
        </ul>
        <div class="arrow prev">&lt;</div>
        <div class="arrow next">&gt;</div>
        <ul class="bullet clearfix">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ul>
    </div>

基本原理（左右滑动）：

1.首先，要创建一个容器用来展示轮播图片的窗口(<div class="container">)，因为一次只展示一张图片，所以设置其宽高为一张图片的宽高，并设置其样式overflow:hidden;position:relative;。

2.其次，创建一个包裹轮播图的容器(<ul class="img-ct">)，并设置其样式为position:absolute.
3.因为图片(<img>)是包裹在元素li里的，所以设置li样式float:left使所有li都在同行显示。
4.此时，通过改变包裹图片的容器(<ul class="img-ct")的position的left值，使图片达到在窗口(<div class="container")中看似向左或向右滑动的效果。

根据基本原理，总的来说，可以抽象出以下几个函数：

playNext(); // 点击“下一个”按钮("<div class="next")，使图片向左滑动
playPrev(); //点击“上一个”按钮("<div class="prev")，使图片向右滑动
setBullet(); //根据当前展示图片的索引，将`class=active`的样式切换到对应的tab
play(); // 利用setInterval函数设置定时器，使轮播自动播放
stop(); // 利用clearInterval函数清除定时器，使轮播停止播放。

题目2：实现视频中的左右滚动无限循环轮播效果

jsbin-实现左右滚动无限轮播

题目3：实现一个渐变轮播效果, 效果范例

jsbin-jQuery实现渐变轮播