javascript轮播图算法

轮播图，是网站首页中常见的一种图片切换特效，作为前端开发者，我相信很多开发者都直接调用了Jquery中的封装好的方法实现图片轮播，省事简单。所以我想介绍一下javascript纯代码实现的图片轮播。

HTML

<div id="content_img1">
<ul id="img1">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<div id="content_img2">
<ul id="img2">
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
<li><img src="img/2.jpg"/></li>
<li><img src="img/3.jpg"/></li>
<li><img src="img/4.jpg"/></li>
<li><img src="img/5.jpg"/></li>
<li><img src="img/1.jpg"/></li>
</ul>
<span class="mouseover" style="margin-left: 300px;">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>

这里我相信最多疑惑的是，明明五张图片为何要在首尾加两张图片(li)做首尾呼应呢？原因如下图：

这里以向左滚动的例子为说明

一开始布局的时候left: -470px;先处于第2个li也就是第2张图，当我们图片陆续向左滚动到第7张图片的时候，迅速扯回到第2张图，然后还是继续向左滚动。这样看起来就像是假象式的无限向左滚动循环，其实它里面只有7张图组成。同样的，如果实现向右滚动，我们一开始布局的时候，先处于第1个li也就是第1张图，