原生js实现一个简单的轮播图

想锻炼一下自己的原生js能力可以从写一个轮播图开始，轮播图的运用想必大家都知道吧，好了废话不多说，开始记笔记了

首先是构造html：

<div id="container">
    <div id="list" style="left:-600px">
 <img src="img/4.jpg" alt="4">
<img src="img/1.jpg" alt="1">
<img src="img/2.jpg" alt="2">
<img src="img/3.jpg" alt="3">
<img src="img/4.jpg" alt="4">
<img src="img/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>
    </div>
<a  id="prev" class="arrow"></a>
<a  id="next" class="arrow"></a>
</div>

这里需要讲一下的是图片本来是4个，但是需要把第4个和第一个分别多加入到第一个位置和最后一个位置，（为何要这一步？是为了实现无缝播放，由于移动时，为了让用户感觉到第4个图片播放完之后，是第一个图片，必须将第4个图片放到第一个图片的前面）并且设置list的偏移量为-600px（-600px是由于设置时将图片4放置在list的第一个位置，而要显示的是图片1，此时图片1的位置是-600px）