标签：uid 总结 lis first css idt reg item list
运用二块画布实现轮播动画
第一帧显示第一张图；
第二帧显示第二张图；
先向左左动画；
动画结束后，将第一帧删除；
在第二帧后添加新的帧，并将新帧的图片换成，图片数组中要显示的下一个图片
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);
});
先删除当前位置的第二帧；
在第一帧前添加一帧，并将新帧的图片换成，图片数组中要显示的下一个图片；
最后向右做动画
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);
根据方向，维持二个数组：当前显示数组，即将显示数组；
点击事件先获取第二帧数据；对第一帧做动画；
第一帧动画完了，显示第二帧，然后做第二帧动画；
第二帧动画结束后，将当前的数据变更为第二帧的数据。
$(this.data.frameParent).find("li:first-child").animate({
marginLeft:"0"
},1000);
标签：uid 总结 lis first css idt reg item list
原文地址：http://www.cnblogs.com/jingwhale/p/6808337.html
