Question

我正在尝试使用jQuery创建一个简单的滑块来训练我的JavaScript，但存在一些问题。

我的html代码：

  <div id="slider" class="slider">
      <div class="slider-item">
          <img src="img/apple.jpg" alt="apples image" />
      </div>
      <div class="slider-item">
          <img src="img/newsletter.png" alt="newsletter image" />
      </div>
      <div class="slider-item">
          <img src="img/tree.jpg" alt="tree image" />
      </div>
  </div>

这是我的JS：

var slider_item = $('.slider-item');

/* Toggle all slider items except the first */
for(var i = 1; i < slider_item.length; i++) {
    slider_item.eq(i).toggle();
}

function autoSlide() {
    setTimeout(function() {
        slider_item.each(function() {
            if($(this).is(":visible")) {
                console.log($(this).index() + " is visible");
                console.log($(this).index());
                console.log($(this).index() + 1);
                $(this).toggle();
                slider_item.eq($(this).index() + 1).toggle();
            }
        });
        autoSlide();
    }, 2000);
}

autoSlide();

slider_item.click(function() {
    $(this).toggle();
    if($(this).index() === slider_item.length -1) {
        slider_item.eq(0).toggle();
    } else {
        slider_item.eq($(this).index() + 1).toggle();
    }
});

单击功能运行良好。但是autoSlide（）无法正常工作：我会尝试通过console.log帮助您，因为我对英语不友好。

所以首先：有console.log： -可见0（好的） -0（好的） -1（好的，很好）

因此，切换了我可见的图像。但是这一行：slider_item.eq（$（this）.index（）+ 1）.toggle（）;不管用！而且，如果我将它替换为slider_item.eq（1）.toggle（），它就可以工作（滑块不起作用，但是您能理解我的意思）。

希望您能理解我的问题：

console.log($(this).index() + 1); // GIVE ME 1
slider_item.eq($(this).index() + 1).toggle(); // NOT WORKING
slider_item.eq(1).toggle(); // WORKING

为什么给我1但不会切换，如果我自己设置eq（1）也会切换？ -_-

尝试制作带有jQuery的滑块

0 个答案: