鏈接地址：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
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張圖片
[]括號里面的代表你的容器里面顯示的3張圖片