首页 > 代码库 > 轮播总结
轮播总结
轮播总结
一.二帧式布局实现
运用二块画布实现轮播动画
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
$(this.data.frameParent).find("li:first-child").animate({
marginLeft:"0"
},1000);
轮播总结
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。