三十五、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(){
    $