Jquery Problème Sorte de Diaporama Auto

Question

Je rencontre des problèmes, j'aimerais avoir une sorte de diaporama où les utilisateurs ont 4 boutons, et quand ils cliquent, un div apparaît et les autres disparaissent. Les div sont tous dans le même endroit avec la même taille. Je voudrais aussi mettre cette automatique

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

Votre principal problème est ID répété, les ID doivent être uniques, donc $("#ID").eq() ne pas tous ont un but vraiment, car il devrait être 1 ou 0. Tout d'abord donner les éléments d'une classe à la place:

<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>​ 

et utiliser un sélecteur de classe, comme ceci:

$(".MainImage") 

aussi auto doit être déclarée avant de l'utiliser ou le définir en fonction directement, dans l'ensemble comme ceci:

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.