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

Jquery问题排序自动幻灯片

1 个答案: