Question

我是jQuery的新手，用幻灯片练习并尝试重复它。出于某种原因，if ( last.is(active) )永远不会返回true。在检查员中，我可以看到最后一个孩子正在获得活动ID。这不是它的意思吗？ if (active != last)也没有工作。

Fiddle

JS

function changeImage() {
  var active = $('#active');
  var first = $('#slideshow:nth-child(1)');
  var last = $('#slideshow:nth-last-child(1)');
  if ( last.is(active) ) {
    var next = first;
  } else {
    var next = active.next();
  }
  next.attr('id', 'active');
  active.attr('id', 'inactive');
}

setInterval(changeImage, 1000);

标记

<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>

CSS

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

Answer 1

我把这个小提琴放在一起给你。 https://jsfiddle.net/76xg0d7L/

在这种情况下，使用类比使用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;
}

如果您有任何疑问或是否适合您，请与我们联系。

Answer 2

https://jsfiddle.net/gm9twq6j/

您应该使用Interface，.addClass和.removeClass传递一个名为“有效”的课程，而不是您尝试更换ID。

JS：

.hasClass

CSS：

function changeImage() {
    var active = $('#slideshow').find('.active');
    var first = $('#slideshow img:first-child');
    var last = $('#slideshow img:last-child');
    if ( last.hasClass('active') ) {
        var next = first;
    } else {
        var next = active.next();
    }
    active.removeClass('active');
    next.addClass('active');
}

setInterval(changeImage, 1000);

HTML：

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

Answer 3

你应该更像

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

.is（）没有按预期工作

3 个答案: