学习轮播后的一点小心得

关于学习轮播后的一点小心得

这里直接贴出HTML代码，相关解释会放在代码前后。

原理说明（个人理解）：将所有图片放在一个div中的同时，使其左浮动呈现在一行；同时用一个容器包裹住，将容器的大小设置为一张图片的大小，超出的部分隐藏起来；通过控制图片的div的left值，向左或向右的移动一张图片的大小；可以设置相关按钮去控制图片的切换，最后通过一个定时器让图片自动播放。

    <div id="container">
        <div id="list" style="left:-600px;">
            <img src="../../images/103.jpg"/>
            <img src="../../images/101.jpg"/>
            <img src="../../images/102.jpg"/>
            <img src="../../images/103.jpg"/>
            <img src="../../images/101.jpg"/>
        </div>
        <div id="button">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>


        <a href="javascript:;" id="prev" class="arrow">&lt;</a>
        <a href="javascript:;" id="next" class="arrow">&gt;</a>

    </div>

简单说明：这里的轮播图，其实就是一个container容器,包含了一个图片列表div（这里为了防止切换出现空白处，在最开始和最后分别加上了最后一张和第一张的图片，所以在list的样式中设置了left：-600px，用于显示要显示的第一张图片），一组与图片对应的按钮div&#x