javascript - Jquery自动幻灯片排序问题

Question

我遇到了一些问题，我想要一种幻灯片放映，其中用户有 4 个按钮，当他们单击时，一个 div 会出现，而其他 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 .