Question

我正在尝试构建一个图像幻灯片，在停止后会逐渐消失回第一个图像，但我没有得到它。有人会如此友善地指出我的解决方案吗？

以下是代码：http://codepen.io/peterschmidler/pen/hFHtJ

非常感谢！

PS

Answer 1

if (context.hasClass("stopshow")) {
   next = context.find('.images img:first');  
   stopshow = true;
}else{
   next = next.length ? next : context.find('.images img:first');
}

我们只是检查是否存在班级stopshow，并使用简单的if语句来操纵我们对next的分配。

然后在动画回调中，我们只在stopshow变量不为真的情况下重复

if(!stopshow) filesCrossfade(context)

Answer 2

为什么重新发明轮子？试试众所周知的jQuery循环幻灯片插件。它是轻量级的，适用于移动设备，非常易于实现，并且具有许多非常有用的自定义选项。请参阅here。

Answer 3

$(document).ready(function(){

  function filesCrossfade(context) {
    if (context.hasClass("stopshow")) {
      context.find('.images img.active').removeClass('active').delay(500).fadeOut(500);
      context.find('.images img:first').addClass('active').delay(500).fadeIn(500);
      return;

    }

    if (context.find('.images img').length > 1) {

      var active = context.find('.images img.active');
      var next = active.next();
      next = next.length ? next : context.find('.images img:first');
      active.removeClass('active').delay(500).fadeOut(500);
      next.addClass('active').delay(500).fadeIn(500, function() {
        filesCrossfade(context) });

    }

  }

  $(".content .slideshow").each(function(){
    $(this).find('.images img').hide();
    $(this).find('.images img').eq(0).fadeIn(500);

  });

  filesCrossfade($(".content .slideshow").eq(0));

  $('.stop').click(function(){
    $(".content .slideshow").eq(0).addClass("stopshow");
  });  

});

jQuery图像幻灯片显示在停止后淡化回第一个图像

3 个答案: