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"></li>
            <li class="Li"><img src="images/3.jpg"></li>
            <li class="Li"><img src="images/4.jpg"></li>
            <li class="Li"><img src="images/5.jpg"></li>
            <li class="Li"><img src="images/6.jpg"></li>
        </ul>
    </div>
    <div id="nav">
        <a href="#" class="next"></a>
        <a href="#" class="prev"></a>
    </div>
</div>

接下来是CSS部分，利用ul外层的div的overflow属性来显示单个图片

#content {
    overflow: hidden;
    width: 400px;
    height: 300px;
    margin: 0 auto;
    border: 3px solid black;
}

还需要将ul里的图片弄成一行，这个直接利用浮动设置

.photo li {
    float: left;
}

这样基本的布局已经完成了，下面要实现的就是jQuery的部分了，将ul的左外边距依次减小图片的宽度400px。但是这样的话，当移动到最后一张图片的时候，再点击下一页，就要把ul的左外边距重新设置成0px,这样就完成了图片的轮播。

但是这样其实有一个BUG，你从最后一张图片跳到第一张图片其实是没有动画效果的，看起来很不舒服，那怎么弄，才能解决这个小BUG呢。

其实jQuery有两个方法，prepend() 和append()。前者是在一个元素中的头部插入一个元素，后者是在尾部，这样每次在将ul的第一个元素左移400px后，将其添加到ul的尾部然后删除利用remove()方法，也就是说这第一个元素现在成了最后一个元素。这中间需要用一个变量保存这个元素，可以利用clone()方法。

代码如下

$(document).ready(function(){
        $("#nav .next").click(function(){
            movenext();
        });
        function movenext(){
        $(".photo li:first-child").animate({marginLeft:"-400px"},1000,function(){
                    var temp=$(this).clone();
                        $(this).remove();
                        temp.css({marginLeft:"0"});
                    $(".photo").append(temp);
                });
        }
    });

这样，向后轮播实现。向前是一样的

$(document).ready(function(){
            $("#nav .prev").click(function(){
                moveprev();
            });
            function moveprev(){
                    var temp=$(".photo li:last-child").clone();
                    $(".photo li:last-child").remove();
                    temp.css({marginLeft:"-400px"});
                    $(".photo").prepend(temp);
                    $(".photo li:first-child").animate({marginLeft:"0"},1000);
            }
        });

这里需要注意的一点，向前是需要先将尾部的元素添加到头部，再执行图片的切换，和向后的顺序是相反的。

在线轮播图展示：简单的轮播图