三十五、jquery动画 无缝滚动两种方式

无缝轮播有两种方式，一种可以让ul中的每个li进行移动，另外一种时令整个ul进行移动。无缝轮播效果之前用js写过一次，以下是用jQuery分别实现这两种方式；

 

一、第一种 控制每个li标签移动实现无缝轮播

1.基本布局样式

2.实现自动向左轮播

采用枚举对象封装函数的方法，封装自动轮播的方法:利用jQuery的自定义动画animate改变第一张图片的marginLeft令其向左移动，当移动结束时将第一张图片追加到末尾。(注意还需修改其marginLeft为0)

animate({执行动画属性},执行时间,运动方式,动画完成回调函数)

var Animate={
    //自动轮播
    imganimate:function(){
        $(".ulinfo li").first().animate({
            marginLeft:"-600px"
        },1000,"linear",function(){
            $(".ulinfo").append($(this));
            $(this).css("marginLeft","0px");
        })
    }
}

 

3.鼠标进入图片停止轮播离开继续轮播

采用链式操作；移除绑定定时器；

//鼠标进入停止 离开继续
pauseimg:function(){
    $(".block").mouseenter(function(){
        clearInterval(time);
    }).mouseleave(function(){
        time=setInterval("Animate.imganimate()",1500);
    });
},

 

4.封装索引圈创建方法及跟随图片自动转换

利用jQuery动态创建dom元素创建索引圈；

//索引圈创建
circleCreate:function(){
   var lenth=$(".ulinfo li").length;
   for (var i=0;i<lenth;i++){
       var circle=$("<div></div>");
       circle.addClass("dian");
       $(".circle").append(circle);
   }
   $(".dian").eq(0).css("backgroundColor","red");
}

定义全局变量，在自动轮播封装方法添加索引圈自动跟随变换；

注意：count这里%6，当然也可以if判断设置count=0;

//索引圈自动跟随转换
count++;
$(".dian").css("backgroundColor","");
$(".dian").eq(count%6).css("backgroundColor","red");

 

5.封装任意进入某个索引圈对应图片跟随转换

首先任意进入一个索引圈，其他索引圈为白，当前为红；

求当前进入索引圈索引值与图片索引值(count%6)的差值，判断差值正负，正值则进入圈在播放图片之后，负值则进入圈在播放图片之前，这时就需要处理差值，根据这个值确定图片轮转的次数；

注意：这里需要处理两个bug

A. 反复进入同一个圈的bug

B. 当快速滑过几个索引圈，上一个还未结束下一个操作被触发的bug(递归方法，移除绑定事件；或者定义标志位处理bug)

//进入索引圈对应图片跟随变换
incircle:function(){
    $(".dian").each(function(index){
        $(this).mouseenter(function(){
            //解绑其它索引圈进入事件
            $(".dian").css("backgroundColor","").unbind("mouseenter");
            $(this).css("backgroundColor","red");
            //计算轮播次数
            var num=(index-count%6)<0?index-count%6+6:index-count%6;
            //处理反复进入同一索引圈的bug
            if(num==0){
                Animate.incircle();
                return;
            }

            shift();
            var shiftnum=0;//定义实际轮播次数
            function shift(){
                $(".ulinfo li").first().animate({
                    marginLeft:"-600px"
                },1000/num,function(){
                    $(".ulinfo").append($(this));
                    $(this).css("marginLeft","0px");

                    shiftnum++;
                    if(shiftnum>=num){
                        count=index;
                        Animate.incircle();
                        return;
                    }

                    shift();//递归调用
                });

            }
        });
    })

},

//进入索引圈对应图片跟随变换
incircle:function(){
    $(".dian").each(function(index){
        $(this).mouseenter(function(){
            //解绑其它索引圈进入事件
            $(".dian").css("backgroundColor","").unbind("mouseenter");
            $(this).css("backgroundColor","red");
            //计算轮播次数
            var num=(index-count%6)<0?index-count%6+6:index-count%6;
            //处理反复进入同一索引圈的bug
            if(num==0){
                Animate.incircle();
                return;
            }

            shift();
            var shiftnum=0;//定义实际轮播次数
            function shift(){
                $(".ulinfo li").first().animate({
                    marginLeft:"-600px"
                },1000/num,function(){
                    $(".ulinfo").append($(this));
                    $(this).css("marginLeft","0px");

                    shiftnum++;
                    if(shiftnum>=num){
                        count=index;
                        Animate.incircle();
                        return;
                    }

                    shift();//递归调用
                });

            }
        });
    })

},

5.左右箭头点击事件

需要注意的是点击右边时，轮播是反方向，需要每次将最后一张添加到最前面，原本第一张向后调整600px,另外索引圈也是反方向转；

注意：通过移除绑定事件处理多次连续点击的bug

  点击右侧反向，需要改变ul的marginleft值处理空白的bug; 

is() 根据选择器/元素/jQuery 对象检查匹配元素集合，如果存在至少一个匹配元素，则返回 true

 

//左右点击
AddClick:function(){
    $("#left,#right").on('click',addclick);

    function addclick() {
        var that=$(this);
        that.unbind("click",addclick);

        if($(this).is("#left")){//判断左右
            //left
            $(".ulinfo li:first").animate({
                marginLeft:"-600px"
            },500,"linear",function(){
                $(this).appendTo($(this).parent());
                $(this).css("marginLeft","0px");
                //索引圈也得跟随
                count++;
                $(".dian").css("backgroundColor","");
                $(".dian").eq(count%6).css("backgroundColor","red");

                //重新绑定事件
                $(that).bind("click", addclick)
            })
        }else{
            //right
            $(".ulinfo li:first").animate({
                marginLeft: "600px"
            },500, "linear", function () {
                $(".ulinfo li:last").prependTo($(this).parent());
                $(this).css("marginLeft","0px");

                count--;
                $(".dian").css("backgroundColor", "");
                $(".dian").eq(count % 6).css("backgroundColor", "red");

                //重新绑定事件
                $(that).bind("click",addclick);
            });
        }
    }
}

 

二、第二种 控制整个ul标签移动实现无缝轮播(较第一种简单)

 

1.基本结构样式一致

2.自动向左轮播：将整个ul向左移动，当移动完最后一张图片，整体调回原来的位置，这样会有一个空白闪回的bug,所有需要复制第一张到末尾；

clone() 生成被选元素的副本 即复制；

var count=0;//定义变量控制轮播
var time;
$(function(){
    //复制
    ($(".ulinfo li").first().clone()).appendTo($(".ulinfo"));
    //自动轮播
    time=setInterval(shift,1000);
    function shift(){
        count++;
        $(".ulinfo").animate({
            marginLeft:(-600*count)+"px"
        },500,"linear",function(){
           if(count>=$(".ulinfo li").length-1){
               $(".ulinfo").css("marginLeft","0px");
               count=0;
           }
        })
    }
})

 

3.添加索引点自动跟随轮播及任意进入事件

这里首先得创建索引点，创建方法和li轮播一致；

自动跟随可直接添加到图片自动轮播内；

任意进入执行动画事件，只需利用遍历点的当前索引值控制整个ul的移动即可，之前向右滑动，之后向左滑动，近慢远快；

注意：当移动结束后将当前点的索引值赋给count，令自动轮播紧接着这个点继续；

  还需添加shop()动画，处理多次滑动的bug;

//任意点进入执行动画
$(".dian").each(function(index){
    $(this).mouseenter(function(){
        $(".dian").css("backgroundColor","");
        $(this).css("backgroundColor","red");

        $(".ulinfo").stop().animate({
            marginLeft:(-600*index)+"px"
        },500,"linear",function(){
            count=index;
        });
    });
});

 

4.鼠标进入 离开事件与li方式一致

5.添加左右单击事件

点击左边即自动轮播方向，直接调用封装好的函数即可；

点击右边则反方向运行，需要简单的改变；

 

//左右两边
$("#left,#right").click(function(){
    if($(this).is("#left")){
        shift();
    }else{
        count--;
        if(count<0){
            count=5;
            $(".ulinfo").css("marginLeft","-3600px")
        }
        $(".ulinfo").stop().animate({
            marginLeft:(-600*count)+"px"
        },500,function(){
            //索引点跟随
            $(".dian").css("backgroundColor","");
            $(".dian").eq(count).css("backgroundColor","red")
        })
    }
});

三、完整代码

1.li方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .block{
            width: 600px;
            height: 330px;
            margin: 20px auto;
           /* border: 1px solid black;*/
            overflow: hidden;
            position: relative;
        }
        .ulinfo{
            width: 4200px;
            height: 300px;
            margin-left: -600px;
        }
        .ulinfo li{
            width: 600px;
            height: 300px;
            list-style: none;
            float: left;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .circle{
            width: 170px;
            height: 20px;
            /*border: 1px solid red;*/
            margin: 0 auto;
        }
        .dian{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid black;
            margin: 5px 8px;
            float: left;
        }
        .click{
            position: absolute;
            width: 100%;
        }
        #left,#right{
            width: 70px;
            height: 300px;
            display: none;
        }
        #left{
            background: linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.1));
            float: left;
        }
        #right {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8));
            float: right;
        }
    </style>
    <script src="js/jquery-3.0.0.js"></script>
    <script>
        var count=0;//索引圈变量
        var time;
        $(function(){
           time=setInterval("Animate.imganimate()",1500);
           Animate.circleCreate();
           Animate.pauseimg();
           Animate.incircle();
           Animate.AddClick();
        });
        var Animate={
            //自动轮播
            imganimate:function(){
                $(".ulinfo li").first().animate({
                    marginLeft:"-600px"
                },1000,"linear",function(){
                    $(".ulinfo").append($(this));
                    $(this).css("marginLeft","0px");

                    //索引圈自动跟随转换
                    count++;
                    $(".dian").css("backgroundColor","");
                    $(".dian").eq(count%6).css("backgroundColor","red");
                })
            },
            //索引圈创建
            circleCreate:function(){
               var lenth=$(".ulinfo li").length;
               for (var i=0;i<lenth;i++){
                   var circle=$("<div></div>");
                   circle.addClass("dian");
                   $(".circle").append(circle);
               }
               $(".dian").eq(0).css("backgroundColor","red");
            },
            //鼠标进入停止 离开继续
            pauseimg:function(){
                $(".block").mouseenter(function(){
                    clearInterval(time);
                    $("#left,#right").css("display","block");
                }).mouseleave(function(){
                    time=setInterval("Animate.imganimate()",1500);
                    $("#left,#right").css("display","none");
                });
            },
            //进入索引圈对应图片跟随变换
            incircle:function(){
                $(".dian").each(function(index){
                    $(this).mouseenter(function(){
                        //解绑其它索引圈进入事件
                        $(".dian").css("backgroundColor","").unbind("mouseenter");
                        $(this).css("backgroundColor","red");
                        //计算轮播次数
                        var num=(index-count%6)<0?index-count%6+6:index-count%6;
                        //处理反复进入同一索引圈的bug
                        if(num==0){
                            Animate.incircle();
                            return;
                        }

                        shift();
                        var shiftnum=0;//定义实际轮播次数
                        function shift(){
                            $(".ulinfo li").first().animate({
                                marginLeft:"-600px"
                            },1000/num,function(){
                                $(".ulinfo").append($(this));
                                $(this).css("marginLeft","0px");

                                shiftnum++;
                                if(shiftnum>=num){
                                    count=index;
                                    Animate.incircle();
                                    return;
                                }

                                shift();//递归调用
                            });

                        }
                    });
                })

            },
            //左右点击
            AddClick:function(){
                $("#left,#right").on('click',addclick);

                function addclick() {
                    var that=$(this);
                    that.unbind("click",addclick);

                    if($(this).is("#left")){//判断左右
                        //left
                        $(".ulinfo li:first").animate({
                            marginLeft:"-600px"
                        },500,"linear",function(){
                            $(this).appendTo($(this).parent());
                            $(this).css("marginLeft","0px");
                            //索引圈也得跟随
                            count++;
                            $(".dian").css("backgroundColor","");
                            $(".dian").eq(count%6).css("backgroundColor","red");

                            //重新绑定事件
                            $(that).bind("click", addclick)
                        })
                    }else{
                        //right
                        $(".ulinfo li:first").animate({
                            marginLeft: "600px"
                        },500, "linear", function () {
                            $(".ulinfo li:last").prependTo($(this).parent());
                            $(this).css("marginLeft","0px");

                            count--;
                            $(".dian").css("backgroundColor", "");
                            $(".dian").eq(count % 6).css("backgroundColor", "red");

                            //重新绑定事件
                            $(that).bind("click",addclick);
                        });
                    }
                }
            }
        }
    </script>
</head>
<body>
<div class="block">
    <div class="click">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <ul class="ulinfo">
        <li><img src="image/demo1.jpg"></li>
        <li><img src="image/demo2.jpg"></li>
        <li><img src="image/demo3.jpg"></li>
        <li><img src="image/demo4.jpg"></li>
        <li><img src="image/demo5.jpg"></li>
        <li><img src="image/demo6.jpg"></li>
    </ul>
    <div class="circle"></div>
</div>
</body>
</html>

2.ul方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        .block{
            width: 600px;
            height: 330px;
            margin: 20px auto;
            /* border: 1px solid black;*/
            overflow: hidden;
            position: relative;
        }
        .ulinfo{
            width: 4200px;
            height: 300px;
        }
        .ulinfo li{
            width: 600px;
            height: 300px;
            list-style: none;
            float: left;
        }
        img{
            width: 100%;
            height: 100%;
        }
        .circle{
            width: 170px;
            height: 20px;
            /*border: 1px solid red;*/
            margin: 0 auto;
        }
        .dian{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            border: 1px solid black;
            margin: 5px 8px;
            float: left;
        }
        .click{
            position: absolute;
            width: 100%;
        }
        #left,#right{
            width: 70px;
            height: 300px;
            display: none;
        }
        #left{
            background: linear-gradient(90deg,rgba(255,255,255,0.8),rgba(255,255,255,0.1));
            float: left;
        }
        #right {
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.8));
            float: right;
        }
    </style>
    <script src="js/jquery-3.0.0.js"></script>
    <script>
        var count=0;//定义变量控制轮播
        var time;
        $(function(){
            //复制
            ($(".ulinfo li").first().clone()).appendTo($(".ulinfo"));
            //自动轮播
            time=setInterval(shift,1000);
            //创建索引圈
            for(var i=0;i<$(".ulinfo li").length-1;i++){
                var dian=$('<div></div>');
                dian.addClass("dian");
                $(dian).appendTo($(".circle"));
            }
            $(".dian").eq(0).css("backgroundColor","red");
            //鼠标进入停止 离开继续
            $(".block").mouseenter(function(){
                clearInterval(time);
                $("#left,#right").css("display","block");
            }).mouseleave(function(){
                time=setInterval(shift,1000);
                $("#left,#right").css("display","none");
            });
            //任意点进入执行动画
            $(".dian").each(function(index){
                $(this).mouseenter(function(){
                    $(".dian").css("backgroundColor","");
                    $(this).css("backgroundColor","red");

                    $(".ulinfo").stop().animate({
                        marginLeft:(-600*index)+"px"
                    },500,"linear",function(){
                        count=index;
                    });
                });
            });
            //左右两边
            $("#left,#right").click(function(){
                if($(this).is("#left")){
                    shift();
                }else{
                    count--;
                    if(count<0){
                        count=5;
                        $(".ulinfo").css("marginLeft","-3600px")
                    }
                    $(".ulinfo").stop().animate({
                        marginLeft:(-600*count)+"px"
                    },500,function(){
                        //索引点跟随
                        $(".dian").css("backgroundColor","");
                        $(".dian").eq(count).css("backgroundColor","red")
                    })
                }
            });
            //自动轮播封装
            function shift(){
                count++;
                $(".ulinfo").animate({
                    marginLeft:(-600*count)+"px"
                },500,"linear",function(){
                   if(count>=$(".ulinfo li").length-1){
                       $(".ulinfo").css("marginLeft","0px");
                       count=0;
                   }

                   //索引点跟随
                    $(".dian").css("backgroundColor","");
                    $(".dian").eq(count).css("backgroundColor","red");
                })
            }
        })
    </script>
</head>
<body>
<div class="block">
    <div class="click">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <ul class="ulinfo">
        <li><img src="image/demo1.jpg"></li>
        <li><img src="image/demo2.jpg"></li>
        <li><img src="image/demo3.jpg"></li>
        <li><img src="image/demo4.jpg"></li>
        <li><img src="image/demo5.jpg"></li>
        <li><img src="image/demo6.jpg"></li>
    </ul>
    <div class="circle"></div>
</div>
</body>
</html>