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

Question

我正在尝试创建一个简单的 JQuery Slider。并且每次只能看到一张照片。在 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

您的 slider 不起作用，因为您以错误的方式使用了 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>