轮播图的实现思路

        图片轮播，一个你再熟悉不过的小东西了。或许在你刚开始学习web的时候就能做出来得到效果。但是你会发现当面对不同的需求的时候又要重新写一个轮播。很是麻烦的对吧。LZ也是这样学习过来的，发现自己写的很多轮播的思路都不一样了。这次写出的下一次也许就写不出来了，或者说是用更好的方式来实现了。下面一起来总结下都有什么样的需求。

    二、需求：

        1） 首先是要能循环显示出来（不考虑循环效果）。

        2）鼠标移到图片上时停止切换，移开之后又自动开始循环。

        3）带有图片标记，两个作用（1、可以给用户提示一共多少张，2、可以知道当前展示得到是第几张）。

        4）带有切换按钮，当用按钮点击的时候就取消自动循环。让用户自由操作（切换按钮需要以上后出现，移开消失）。

    三、思路：

        以前再最开始的时候做轮播是直接改变的图片 url 地址，但是现在不能这样做了。为什么？因为没当变化一下url地址浏览器就会发送一个请求道服务器区拉取这个图片，这样对于性能来说是很不好的。所以不能这样做。Now 那就通过移动图片吧。我的思路（也是在借鉴的基础上）将所有的图片联合成一副大的图片，这样只需要移动一副大的图片就可以实现轮播了。下面一起来看看怎样实现吧！

    四、实现步骤：

    HTML： 

<!--picture-loop-wrapper-->
    <div class="picture-loop-wrapper"> //外部循环显示盒子
        <ul class="imgBox">            //组合长图盒子
            <li id="img1"><a href="#"><img src="img/1.jpg"></a></li>
            <li id="img2"><a href="#"><img src="img/2.jpg"></a></li>
            <li id="img3">