jQuery实现轮播图的无缝滚动

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010594453/article/details/48176737

之前在学习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);
            }
        });

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

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页