js 实现图片间隔循环轮播以及没有间隔的循环轮播

链接地址：http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html

最近做了个图片循环轮播的功能。就是几张图片不断的循环滚动显示。

感觉这个方法不错所以把实现过程记录下来：

图片间隔循环轮播：

1、html里面把要进行轮播的图片用一个容器包起来，用js来控制这个容器滚动，当然最外面的容器要设置overflow：hidden;。

2、css里面控制这个容器的位置，实现滚动就需要用到定位。

3、js里面利用jquery的animate动画函数实现滚动。

 

js列子：

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张图片轮播，下面看看方的位置：

 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张图片