var g = function (id) {
return document.getElementById(id);
}
//时间类函数
var Timeline = function(){
this.order = [];
this.add = function(timeout, func, log) {
this.order.push({
timeout:timeout,
func:func,
log:log,
});
}
this.play = function(){
var len = this.order.length;
for(var i = 0; i < len; i++){
(function(obj){
setTimeout(obj.func,obj.timeout);
//setTimeout(console.log(obj.timeout+" "+obj.log),obj.timeout);
})(this.order[i])
}
}
}
var s = new Timeline;
var arr = g('c_img').children;
var imglen = arr.length;
var tw=3000; //timewait 等待时间
var tp=1500; //timepass 动画时间
//循环添加动画
for (var k = 0; k < imglen; k++) {
if(k == imglen-1){
s.add((k+1)*tw+k*tp,function(){
arr[k].className = 'item_after';
arr[0].className = 'item_next';
});
s.add((k+1)*tw+(k+1)*tp,function(){
arr[k].className = 'item';
arr[0].className = 'item_active';
s.play();
});
}
else{
s.add((k+1)*tw+k*tp,function(){
arr[k].className = 'item_after';
arr[k+1].className = 'item_next';
});
s.add((k+1)*tw+(k+1)*tp,function(){
arr[k].className = 'item';
arr[k+1].className = 'item_active';
});
}
};
//手动添加动画
/*s.add(tw,function(){
arr[0].className = 'item_after';
arr[1].className = 'item_next';
});
s.add(tw+tp,function(){
arr[0].className = 'item';
arr[1].className = 'item_active';
});
s.add(2*tw+tp,function(){
arr[1].className = 'item_after';
arr[2].className = 'item_next';
});
s.add(2*tw+2*tp,function(){
arr[1].className = 'item';
arr[2].className = 'item_active';
});
s.add(3*tw+2*tp,function(){
arr[2].className = 'item_after';
arr[0].className = 'item_next';
});
s.add(3*tw+3*tp,function(){
arr[2].className = 'item';
arr[0].className = 'item_active';
s.play();
})*/
s.play();
如题,在上面的代码中我创建了一个时间链,在向其中加入事件时,如果是循环加入,在动画执行时循环变量永远是最终值3,请问循环添加要如何才能做到像下面手动添加一样的效果?
ps:初学者,希望大牛们说的详细一点……