轮播图的实现（jQuery）（一，思路）

实现样式 + 源代码

---

功能：

• 实现每3秒向右滚动一幅图
• 点击左／右方块一次使图片向左／右滚动一次
• 点击底部方块使相应图片展示出来，并且滚动到相应图片时对应方块变色
• 可以循环播放

---

技术难点：

轮播图的轮播移动效果(尤其是使它能够循环播放)

• 如果轮播图的html代码如下所示

    <!--轮播图容器-->    <div id="slider">        <div>            <ul class="slides">                <li class="slide">a</li>                <li class="slide">b</li>                <li class="slide">c</li>                <li class="slide">d</li>                <li class="slide">e</li>                <li class="slide">a</li>            </ul>        </div>    </div>

    *{        margin:0;        padding:0;    }    /*轮播图整体容器*/    #slider{        width:400px;        height:248px;        overflow:hidden;        position:relative;    }    /*轮播图内容容器*/    #slider .slides{        display: block;        position:relative;        width:6000px;        height:248px;    }    /*轮播图具体内容容器*/    #slider .slides .slide{        float:left;        list-style-type: none;        width:400px;        height:248px;        /*以下样式可选，主要为了测试代码看的方便*/        box-sizing:border-box;        border:1px solid darkgreen;        text-align:center;        line-height:248px;    }

• 如果有n幅轮播图需要展示的话，再加上一个，内容和第1个轮播图相同

• 使用jquery的 ‘animate’ 实现轮播动画效果

• 移动的方法是对class为 slides 的 ul 结点的css属性 margin-left进行操作，向右移动一次即让其的 margin-left 的值减去轮播图的宽度（width），对于上述示例代码，就是 ‘ -= 400px ’;同理，如果向左则为加号

• 对循环的处理为

  当向右移动到了最后一个图片区块，也就是上述例子的e时，下一次轮播到了最后一个图片区块，也就是第二个a，完成轮播的同时，立刻使它们的容器，也就是class为.slides的 ‘ul’ 的 margin-left 属性值变为 0，也就是立刻回到了第一个图片区块，这样再次向右轮播时就到了第二个区块，完成循环。这步操作可以在jquery的animate函数的第三个参数，也就是回调函数里实现

  当向左移动到了第一个图片区块，也就是上述例子的第一个a时，下一次轮播就为空白了，这是我们不希望的，所以在轮播之前，操作它们的容器，也就是class为.slides的 ‘ul’ 的 margin-left 属性值，使其移动到最后一个图片区块，也就是最后一个a，这样向左轮播时就到了图片区块，也就是e，完成循环。这部操作可以在在执行animate函数之前对ul直接操作来实现

• 使用js函数setInterval函数来实现自动轮播