Javascript .未按预期工作

我是jQuery新手，正在练习幻灯片并试图让它重复。由于某种原因，

如果（last.is（active））

从未返回true。在inspector中，我可以看到最后一个孩子正在获取活动ID。这不是它的使用方式吗<代码>如果（活动！=上次）也不起作用

JS

加价

<div id="slideshow">
  <img id="active" src="https://i.imgur.com/8iOuvtf.jpg">
  <img src="https://i.imgur.com/Wi8mlH2.jpg">
  <img src="https://i.imgur.com/MNhgqco.jpg">
</div>

您应该使用

.addClass

、

.removeClass

和

.hasglass

传递一个名为“active”的类，而不是尝试交换ID

JS:

CSS:

HTML:

---

您应该更像

function changeImage() {
  var active = $("[state='active']");
  var next = active.is(":last") ? $("#slideshow:first-child") : active.next();
  active.data("state", "inactive"); //don't multiply same id attribute
  next.data("state", "active");
}

setInterval(changeImage, 1000);

---

我为你把这把小提琴组装起来。

在这种情况下，使用类比使用ID容易得多。我已经修改了changeImage（）函数

function changeImage() {
    var $next = $('.slide.active').removeClass('active').next('.slide');

    if ($next.length) {
        $next.addClass('active');
    }
    else {
        $('.slide:first').addClass('active');
    } 
}

setInterval(changeImage, 1000);

我还更新了CSS以选择活动类，而不是ID

#slideshow img {display: none;} 
#slideshow .active {
    display: block;
    width: 100%;
    height: auto;
}

---

如果您有任何问题或这是否适合您，请告诉我。

使用字符串选择器，而不是引用的jq对象。最好是，交换一个类而不是一个毫无目的的ID，在这里链接对我来说有点新鲜，

var$next

在

.slide.active

上说，如果它的下一个同级有类

，那么就删除
.active
类。slide

？如果是这样的话，你怎么能给它添加一个类呢。感谢你的帮助看到我的答案，我试图保持你原有的逻辑流程。但除此之外，@Yuschick有一个更好的干净版本。：-）

#slideshow img {display: none;} 
#slideshow .active {
    display: block;
    width: 100%;
    height: auto;
}

<div id="slideshow">
  <img class="active" src="https://i.imgur.com/8iOuvtf.jpg">
  <img src="https://i.imgur.com/Wi8mlH2.jpg">
  <img src="https://i.imgur.com/MNhgqco.jpg">
</div>

function changeImage() {
  var active = $("[state='active']");
  var next = active.is(":last") ? $("#slideshow:first-child") : active.next();
  active.data("state", "inactive"); //don't multiply same id attribute
  next.data("state", "active");
}

setInterval(changeImage, 1000);

function changeImage() {
    var $next = $('.slide.active').removeClass('active').next('.slide');

    if ($next.length) {
        $next.addClass('active');
    }
    else {
        $('.slide:first').addClass('active');
    } 
}

setInterval(changeImage, 1000);

#slideshow img {display: none;} 
#slideshow .active {
    display: block;
    width: 100%;
    height: auto;
}