首页 > 代码库 > 轮播总结

轮播总结

轮播总结

一.二帧式布局实现

运用二块画布实现轮播动画

1)jq实现的滑动原理

a.初始化
技术分享

第一帧显示第一张图;
第二帧显示第二张图;

  • 技术分享
  • 技术分享
b.向左滑动时
技术分享

先向左左动画;
动画结束后,将第一帧删除;
在第二帧后添加新的帧,并将新帧的图片换成,图片数组中要显示的下一个图片

var _that = this;
            this.data.picNo++;
            if(this.data.picNo==3){
                this.data.picNo=0;
            }else if(this.data.picNo==4){
                this.data.picNo=1;
            }
            $(this.data.frameParent).find("li:first-child").animate({
                marginLeft:"-300px"
            },1000,function(){
                var temp=$(this).clone();
                $(this).remove();
                temp.css({marginLeft:"0"}).children().attr("src",_that.data.srcArr[_that.data.picNo]);
                //temp.css({marginLeft:"0"}).children().attr("data-src",_that.data.srcArr[_that.data.picNo]);
                $(_that.data.frameParent).append(temp);
            });
c.向右滑动时
技术分享

先删除当前位置的第二帧;
在第一帧前添加一帧,并将新帧的图片换成,图片数组中要显示的下一个图片;
最后向右做动画

var _that = this;
this.data.picNo--;
if(this.data.picNo<1){
                this.data.picNo=3;
            }

            var _node = $(this.data.frameParent).find("li:last-child");
            var temp=_node.clone();
            _node.remove();
            temp.css({marginLeft:"-300px"}).children().attr("src",_that.data.srcArr[_that.data.picNo-1]);
            //temp.css({marginLeft:"-300px"}).children().attr("data-src",_that.data.srcArr[_that.data.picNo-1]);
            $(_that.data.frameParent).prepend(temp);
            $(this.data.frameParent).find("li:first-child").animate({
                marginLeft:"0"
            },1000);

2)regular实现原理(固定二帧)

技术分享

根据方向,维持二个数组:当前显示数组,即将显示数组;
点击事件先获取第二帧数据;对第一帧做动画;
第一帧动画完了,显示第二帧,然后做第二帧动画;
第二帧动画结束后,将当前的数据变更为第二帧的数据。

二.动画/h3>

1.jq滑动动画(animate)

$(this.data.frameParent).find("li:first-child").animate({
                marginLeft:"0"
            },1000);

2.regular内置了animate动画

3.regular动画

regular动画文档animation

轮播总结