var Ptop = -100;
function ceshi () {
$(‘#cesji .p1‘).animate({top: Ptop}, {
duration: 400,
complete: function () {
Ptop = Ptop - 106;
if (Ptop == -524) {
Ptop = 6;
$(‘#cesji .p1‘).css(‘top‘, ‘112px‘);
}
}
});
}
var qinghcu = setInterval(ceshi, 3000);
没有间隔的循环轮播:
没有间隔的循环轮播和有间隔的循环轮播步骤差不多,只是定时器不是间隔多久移动一次,而是要执行完一次后马上执行第二次,这里我们最好是用超时定时器setTimeout()方法。一开始执行一次,然后再执行的函数体里面再次调用该定时器,这样就会不断地调用那个执行移动的函数,从而实现不断移动。。。。
用juqery动画的列子:
var sudu = 3;
var hzmtQingChu;
function ceshi () {
$(‘.aa2‘).animate({left:sudu}, {
duration : 120,
complete : function() {
sudu = sudu + 3;
if (sudu == 300) {
//alert(‘a‘);
sudu = 3;
$(‘.aa2‘).css(‘left‘, ‘3px‘);
}
hzmtQingChu = setTimeout(ceshi); //目标移动完后再次调用该移动函数
}
});
}
hzmtQingChu = setTimeout(ceshi, 60);
原生态列子:
var sudu = 1;
var hzmtQingChu;
function ceshi () {
$(‘.aa‘).css(‘left‘, sudu);
sudu = sudu + 1;
if (sudu == 600) {
$(‘.aa‘).css(‘left‘, ‘1‘);
sudu = 1;
}
hzmtQingChu = setTimeout(ceshi);//目标移动完后再次调用该移动函数
}
hzmtQingChu = setTimeout(ceshi);
5, [1, 2, 3], 4,5,1, 2
5, 1, [2, 3, 4],5,1, 2
5, 1, 2, [3, 4, 5],1,2
5,1,2,3[4, 5, 1], 2,
5,1,2,3,4[5,1,2] ==> 这个时候换下面最开始的状态
[5, 1, 2], 3, 4,5,1, 2 [回到最开始的状态]
[]括号里面的代表你的容器里面显示的3张图片