Jquery Problem Sort of Auto Slideshow

Question

Hi there, I'm having some problems, I'd like to have a sort of slideshow where users have 4 buttons, and when they click one div appears and the others disappear. The div's are all in the same place with the same size. I'd also like to put this automatic

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

I'm sorry to answer my question but I want to post the new code:

$("#MainImage").eq(0).fadeIn(1000); $("#MainImage").eq(1).hide(); $("#MainImage").eq(2).hide(); $("#MainImage").eq(3).hide();

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();         });

---

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

This doesnt workm, all divs are showing up and buttons doesnt work, I tried to code on my own but it's a mess

Answer 2

Your main issue is repeated IDs, IDs must be unique, so $("#ID").eq() doesn't every have a purpose really, since it should be 1 or 0 results. First give the elements a class instead:

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

and use a class selector, like this:

$(".MainImage")

Also auto needs to be declared before using it or define it as a function directly, overall like this:

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.