jquery轮播图无缝连接实现

经过一段时间的学习和实践，以及参考了许多中idea之后，实现了这个轮播图无缝链接。（这只是本人自己的方法）步骤如下：

（1）要实现无缝连接，最好是有若干张长宽都一样的图片（数量大概在3到6张，多的就少见了）。设置一个外盒（固定不动，也就是展示一张图片的作用），大小是一张图片大小（长和宽与图片一致）。

（2）在外盒子里面设置一个内盒子，这些图片全部包含内盒子里面，按照一字型排开，也就是设置显示在同一行上，设置图片浮动就可以实现（当然同一列也是一个道理）。，这个盒子的长度为所有图片的宽度的和（也就是图片数目x图片宽度），高度为图片的高；按照这种情况下，内盒宽度比外盒大，所以将内盒子溢出隐藏（css属性overflow：hidden）这样我们就只看到一张图片了，也是第一张。

（3）每次点击向后移动按钮的时候，我们需要向后移动一张图片距离，实现方法是内盒（包含图片的盒子）向前移动一张图片的距离，这样我们在外盒看到的就是下一张图片了。因为只有一定数量的图片，移动到最后一张图片的时候，我们就要转到第一张，实现的方法是将第一张图片移动到最后一张图片后面（使用的是jQuery的append（）方法，当前如果包含有该元素，就将它移动到最后面），这个时候第一张图片之后的图片前移了一个图片距离，所以我们首先将内盒的位置前移一个图片距离（为了当前显示的还是最后一张），然后在做后移一个图片距离就是第一张，不断操作就行了。

（4）点击向前移动时，和向后一样，区别是将最后一张移动到第一张（使用prepend方法），所以内盒要先向后移动一个图片距离，然后在前移一个图片距离。

（5）自动轮播，本人设置默认每相隔3s向后移动一张图片，使用setinterval（后移函数，3s）定时器来实现

（6）图片序号显示，要监听到当前显示的第几张图片，给相应的图片序号点亮，点击其他图片序号的时候，要移动到点击的序号上，先判断点击的图片的序号是比当前显示的序号大还是小，小的话是向前移动（前移函数），大的话后移（后移函数）。移动次数是图片序号的差值。

具体代码如下：

布局显示：

		<div id="box">
			<ul>
				<li><img src="img/array1.jpg" alt=""></li>
				<li><img src="img/array2.jpg" alt=""></li>
				<li><img src="img/array3.jpg" alt=""></li>
				<li><img src="img/array4.jpg" alt=""></li>
			</ul>
			<ol>
				<li class="now">1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
			</ol>
			<input type="button" id="prev" value="<">
			<input type="button" id="next" value=">">
		</div>

css代码： 注意使用了定位

		<style>
			*{