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

js 实现图片间隔循环轮播以及没有间隔的循环轮播的相关教程结束。