jQuery实现轮播图的无缝滚动

之前在学习jQuery时，想做一个轮播图的demo，于是在网上了找了相关的视频教程。然后根据教程不断的改变ul元素的左外边距自己做了一个demo，但是在演示的时候，最后一张到第一张图片切换到时候没有动画效果。之后尝试在最后多添加一个第一张图片，然后在展示这张图片时，默默的把其换成了真正的第一张图片，这样在切换的时候看不到痕迹。但是这样在第一张点击向前时，会出现两张一样的第一张图片。那么如何实现无缝滚动呢？

一、原理
实现原理是通过div的overflow:hide属性来显示单个图片，再不断的改变ul元素的左外边距动画显示每个图片，最关键的是这里，在将ul的第一个元素左移后，将其添加到ul的尾部然后删除，这样，当前显示的图片一直是第一张图片。

二、动手看看
html代码：

<div id="container">
    <div id="content">
        <ul class="photo">
            <li class="Li"><img src="images/1.jpg"></li>
            <li class="Li"><img src="images/2.jpg"></