用原生js实现轮播图

今天分享一下简单的轮播图制作过程，用原生js实现。虽然网上有各种插件制作的高大上又好用的轮播图，但还是要清楚它的基本原理。

1.基本原理

将所有图片并排放到一个div中，然后再放到展示窗口当中，让装有所有图片的div通过改变left值，从而左右移动实现图片切换。

2.html代码

<div id="container">
        <div id="list" style="left:-600px">
            <img src="images/5.jpg" alt="5" />
            <img src="images/1.jpg" alt="1" />
            <img src="images/2.jpg" alt="2" />
            <img src="images/3.jpg" alt="3" />
            <img src="images/4.jpg" alt="4" />
            <img src="images/5.jpg" alt="5" />
            <img src="images/1.jpg" alt="1" />
        </div>
        <div id="buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <a href="javascript:;" class="arrow" id="pre"><</a>
        <a href="javascript:;" class="arrow" id="next">></a>
    </div>

以一个有5张图片的轮播图为例，为了实现无缝滚动，需要在第一张图片前放置第五张图片，在 第五张图片后放置第一张图片，把这七张图片放在一个id为list的容器里面，把显示当前所在页的五个小圆点放在button容器里面，左右切换的按钮则用两个a链接表示。这几个部分全放在container容器里面。

3.css代码

<