使用jQuery創建一個簡單的自動圖像切換器

我需要創建一個非常簡單的圖像切換器，自動更改我的圖像。我有以下代碼：使用jQuery創建一個簡單的自動圖像切換器

<div class="imgCarousel"> 
    <div class="imgC1 left"><img src="/media/1614/1_1.jpg" alt="img1" /></div> 
    <div class="imgC2 left"><img src="/media/1615/2_1.jpg" alt="img2" /></div> 
    <div class="imgC3 left"><img src="/media/1616/3_1.gif" alt="img3" /></div> 
    <div class="imgC4 left"><img src="/media/1617/4_1.jpg" alt="img4" /></div> 
    <div class="imgC5 left"><img src="/media/1618/5_1.jpg" alt="img5a" /></div> 
    <div class="imgC6 left"><img src="/media/1620/6_1.jpg" alt="img6a" /></div> 
    <div class="imgC7 left"><img src="/media/1622/7.jpg" alt="img7" /></div> 
</div>

上述兩張圖片應在一定時間（每3-4秒）後自動切換。這意味着，4秒後，我想要改變圖像/media/1618/5_1.jpg與另一個圖像。又過了4秒鐘，我再次切換回來。我的其他圖像中也有同樣的情況。我怎樣才能用一些jQuery來實現這一點？

來源

2010-06-10 Kim Andersen

有很多插件可以爲你做到這一點，在圖像之間進行轉換。有沒有你自己想編碼的具體原因？ – 2010-06-10 07:58:15

作爲一個便箋，你的代碼中有很多多餘的標記。您不需要將圖像封裝在div中即可開始。此外，我假設「左」類漂浮圖像？爲什麼不將規則應用於.imgCarousel img呢？你需要每個圖像上獨特的類嗎？這不是什麼類，如果你需要一個標識符來使用「ID」，而最有可能你不需要它。更有意義的書寫方式可能是使用無序列表（UL）。關於這個問題，我同意Bernhard，只是找到一個插件來做到這一點。 – micmcg 2010-06-10 08:11:34

我不會爲你編寫了它，而且有這麼多的方式來殺死一隻狗......

給這個鏈接或jQuery方法讀...

得到一些代碼開始，然後再回來與代碼問題的時候......

來源

2010-06-10 07:46:32 Reigel

使用你的代碼作爲參考，你可以只使用一個setInterval的顯示/隱藏你想的div。然而，有幾十種不同的方式來做到這一點。

的setInterval的是：

var loop = setInterval("nextImage()",1000);

然後NEXTIMAGE（）將顯示/隱藏圖像，我會使用jQuery爲例：

var index = 0; 
var images_size = $(".imgCarousel div").size(); 

function nextImage(){ 
// we hide all the divs and show the next one only 
$(".imgCarousel div").hide(); 
$(".imgCarousel div").eq(index).show(); 
// we continue the iteration 
index = index+1; 
if(index >= images_size){ index = 0; } 
}

這是一個快速和骯髒的即興作爲一個例子，但是，有很多方法可以做到這一點。您可能需要檢查load(),src()等預加載功能，以及其他類似fadeIn(),...以獲得平滑過渡/效果。

來源

2010-06-10 08:01:20 ozke

使用jQuery創建一個簡單的自動圖像切換器

回答

相關問題