轮播总结

Posted 2020-09-16

轮播总结

一.二帧式布局实现

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

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