jquery問題自動幻燈片排序

Question

我有一些問題，我想有一種幻燈片，用戶有4個按鈕，當他們點擊一個div出現，其他人消失。 div的大小相同。我也希望把這種自動

var Idx = 1; 
var IntervalKey = setInterval = (auto, 5000); 

var auto = function() { 
    $("#MainImage").eq(Idx).fadeIn(1000); 
    while(Idx <3) { 
    Idx++; 
    $("#MainImage").eq(Idx).hide(); 
    } 
    Idx++; 
    if(Idx>3) { 
    Idx = 0; 
    } 
}; 

$(".botao-imagem").click(function(){ 
    Idx = $(".botao-imagem").index(this); 
    auto(); 
}); 

Answer 1

重複你的主要問題的ID，ID必須是唯一的，所以$("#ID").eq()不會每有一個真正目的，因爲它應該是1分或0的結果。先給元素的類，而不是：

<div class="MainImage"><p>111111</p></div> 
<div class="MainImage"><p>222222</p></div> 
<div class="MainImage"><p>333333</p></div> 
<div class="MainImage"><p>444444</p></div>​ 

和使用類選擇器，這樣的：

$(".MainImage") 

另外auto需要直接使用它或將它定義爲一個功能之前被聲明，整體像這個：

var Idx = 0; 
var IntervalKey = setInterval(auto, 5000); 

function auto() { 
    $(".MainImage").hide().eq(Idx).fadeIn(1000); 
    Idx++; 
    if(Idx>3) Idx = 0; 
}; 

$(".botao-imagem").click(function(){ 
    Idx = $(".botao-imagem").index(this); 
    auto(); 
}); 

You can test the updated/working version with the above code here。