jQuery实现轮播图的无缝滚动

╰半夏微凉° 2022-08-04 14:46 383阅读 0赞

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

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

二、动手看看  
html代码：

接下来是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);
                }
            });

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

在线轮播图展示：[简单的轮播图][Link 1]

[Link 1]: http://anlychu.github.io/FirstIndex/lunbotu/lunbotu.html