带有淡入淡出的jQuery滑块不改变图像

Question

我正在尝试创建一个简单的 JQuery 滑块。并且每次只能看到一张图片。在 x 秒后，一个新的图像应该淡入。 唯一的问题是图像没有显示并停留在第一张图片上。 也许有人可以帮助我。

到目前为止的代码： HTML

 <div id="slideshow">
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 1" class="active" /> 
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 2" />
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 3" />
        </div>
    </span>
    <span>
        <div class="vHolder">
            <img src="http://lorempixel.com/150/150/" alt="Slideshow Image 4" />
        </div>
    </span>
</div>

JS：

function slideSwitch() {
    var $active = $('#slideshow img.active');

    if ( $active.length == 0 ) $active = $('#slideshow img:last');

    var $next =  $active.next().length ? $active.next()
        : $('#slideshow img:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 2500 );
});

还有我的工作 jsfiddle：http://goo.gl/4AvUcr

Answer 1

您的滑块无法正常工作，因为您以错误的方式使用 next：next 是兄弟选择器，因此 img 的下一个兄弟将是它自己，因为 div 中没有其他元素与图像。

如果您更改代码以删除包装 div 的 span 标签（不知道您为什么拥有这些标签并且它是无效代码），您可以使用以下内容：

function slideSwitch() {
  var $active = $('#slideshow .active');

  if ($active.length == 0) $active = $('#slideshow > div:last');

  var $next = $active.next().length ? $active.next() : $('#slideshow > div:first');

  $active.addClass('last-active');

  $next.css({
      opacity: 0.0
    })
    .animate({
      opacity: 1.0
    }, 1000, function() {
      $next.addClass('active')
    });

  $active.css({
      opacity: 1.0
    })
    .animate({
      opacity: 0.0
    }, 1000, function() {
      $active.removeClass('active last-active');
    });


}

$(function() {
  setInterval("slideSwitch()", 2500);
});

#slideshow {
  position: relative;
  height: 350px;
}

#slideshow .vHolder {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 8;
  opacity: 0.0;
}

#slideshow img {
  max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="slideshow">
  <div class="vHolder" class="active">
    <a href="#"><img src="http://lorempixel.com/150/150/city/1" alt="Slideshow Image 1" /></a>
  </div>
  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/2" alt="Slideshow Image 2" /></a>
  </div>

  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/3" alt="Slideshow Image 3" /></a>
  </div>
  <div class="vHolder">
    <a href="#"><img src="http://lorempixel.com/150/150/city/4" alt="Slideshow Image 4" /></a>
  </div>
</div>