Jquery Problem Sort of Auto Slideshow

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

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.