需要帮助将自定义幻灯片显示为自动播放

Question

我接手了一个由别人建造的项目。该网站在主页上提供自定义幻灯片。我已根据客户端请求对幻灯片显示的外观进行了一些更改，但最后需要的是自动播放。

以下是幻灯片演示的脚本。我知道setInterval，但我不确定在哪里放置它，或者代码需要稍微调整一下才能放入。

$(document).ready(function() {
// A little script for preloading all of the images
// It"s not necessary, but generally a good idea
$(images).each(function(index, value){
    // Ski first image since it is already loaded
    if( index != 0 ) {
        $("<img/>")[0].src = this; 
    }
});

// Feature Slider Navagitaion
$('.feature .ei-slider-nav li a').click( function(e) {
    e.preventDefault();

    var thisLink = $(this);
    var navIndex = thisLink.parent('li').index();

    thisLink.parents('ul').children('li').removeClass('active');
    thisLink.parent('li').addClass('active');

    // Is this item already active?
    if( !$('.feature .ei-slider-title .ei-slider-title-item:eq('+navIndex+')').hasClass('active')) {

        // Fade in/out feature image
        $('.feature .ei-slider-large img').animate({opacity: 0}, 500, function() {

            // Support for non-opacity browsers
            $(this).css('visibility', 'hidden');

            // Load new feature image
            $(this).attr('src', images[navIndex]);
            $(this).attr('alt', imagesAlt[navIndex]);

            $(this).css('visibility', 'visible');

            $('.feature .ei-slider-large img').animate({opacity: 1}, 500);
        });

        // Fade in/out feature text
        $('.feature .ei-slider-title .ei-slider-title-item.active').fadeOut(500, function() {
            $(this).parent().children().removeClass('active');

            $('.feature .ei-slider-title .ei-slider-title-item:eq('+navIndex+')').addClass('active').fadeIn();
        });

        // Fade in/out feature credit
        $('.content .ei-slider-credit span.active').fadeOut(500, function() {
            $(this).parent().children().removeClass('active');

            $('.content .ei-slider-credit span:eq('+navIndex+')').addClass('active').fadeIn();
        });


    }
});

// Feature Slider Learn More
$('.feature .ei-slider-title-item-learn').click( function(e) {
    e.preventDefault();

    thisPrev = $(this).prev();

    if( thisPrev.css('display') == 'none') {
        thisPrev.slideDown();

        thisPrev.css('visibility', 'visible');

        thisPrev.animate({'opacity': 1}, 500, function() {

        });

        $(this).html('Hide');
    } else {

        thisPrev.animate({'opacity': 0}, 500, function() {
            thisPrev.slideUp();

            thisPrev.css('visibility', 'hidden');
        });

        $(this).html('Hide');

        $(this).html('Learn More');
    }
});
});

谢谢！

Answer 1

如果有一种方法可以在点击幻灯片导航链接的上下文之外跟踪幻灯片的当前状态，这可能会更容易一些。我要在$('.feature .ei-slider-nav li a').click( function(e) {...之上添加的第一件事就是：

var eiSlider = {
  currentSlideIndex: 0,
  nextSlide: null, // we will define this later
  autoPlay: null // we will define this later too
};

然后，在我上面提到的函数内部，作为检查幻灯片是否已经处于活动状态的第一个业务顺序，我将添加：

// Set the currentSlide index on the global eiSlider tracking object
eiSlider.currentSlide = navIndex;

接下来，您需要创建一个函数来自动处理幻灯片显示：

eiSlider.nextSlide = function() {

  var currentSlideIndex = eiSlider.currentSlideIndex,
      nextSlideIndex = currentSlideIndex + 1,
      totalSlides = $('.ei-slider-large img').length;

  // If we are already at the end of the images, loop back to the beginning
  if ( nextSlideIndex < totalSlides ) {

    nextSlideIndex = 0;
  }

  // Trigger a click to move forward to the next slide
  $('.feature .ei-slider-nav li:eq(' + nextSlideIndex + ') a').trigger('click');
};

我还将在给定幻灯片的导航链接上设置“活动”类的工作转移到逻辑内部，确保您单击的幻灯片尚未激活，以确保它不会设置不正确。

最后，您可以使用setInterval（在所有上述代码的底部）来处理自动播放部分。

// Auto-advance the slides every 5 seconds. Adjust the value as necessary
eiSlider.autoPlay = window.setInterval(function(){
  eiSlider.nextSlide();
}, 5000);

您的最终更新代码如下所示：

$(document).ready(function() {
  // A little script for preloading all of the images
  // It"s not necessary, but generally a good idea
  $(images).each(function(index, value){
    // Ski first image since it is already loaded
    if( index !== 0 ) {

      $("<img/>")[0].src = this; 
    }
  });

  // Object for basic state tracking and namespacing of slideshow functions
  var eiSlider = {
    currentSlideIndex: 0,
    nextSlide: null, // we will define this later
    autoPlay: null // we will define this later too
  };

  // Feature Slider Navagitaion
  $('.feature .ei-slider-nav li a').click( function(e) {

    e.preventDefault();

    var thisLink = $(this),
        navIndex = thisLink.parent('li').index();

      // Is this item already active?
      if( !$('.feature .ei-slider-title .ei-slider-title-item:eq('+navIndex+')').hasClass('active')) {

        thisLink.closest('li').siblings().removeClass('active');
        thisLink.closest('li').addClass('active');

        // Set the currentSlide index on the global eiSlider tracking object
        eiSlider.currentSlideIndex = navIndex;

        // Fade in/out feature image
        $('.feature .ei-slider-large img').animate({opacity: 0}, 500, function() {

          // Support for non-opacity browsers
          $(this).css('visibility', 'hidden');

          // Load new feature image
          $(this).attr('src', images[navIndex]);
          $(this).attr('alt', imagesAlt[navIndex]);
          $(this).css('visibility', 'visible');
          $('.feature .ei-slider-large img').animate({opacity: 1}, 500);
        });

        // Fade in/out feature text
        $('.feature .ei-slider-title .ei-slider-title-item.active').fadeOut(500, function() {

          $(this).parent().children().removeClass('active');
          $('.feature .ei-slider-title .ei-slider-title-item:eq('+navIndex+')').addClass('active').fadeIn();
        });

        // Fade in/out feature credit
        $('.content .ei-slider-credit span.active').fadeOut(500, function() {

          $(this).parent().children().removeClass('active');
          $('.content .ei-slider-credit span:eq('+navIndex+')').addClass('active').fadeIn();
        });
      }
  });

  // Feature Slider Learn More
  $('.feature .ei-slider-title-item-learn').click( function(e) {

    e.preventDefault();
    thisPrev = $(this).prev();

    if ( thisPrev.css('display') === 'none') {

      thisPrev.slideDown();
      thisPrev.css('visibility', 'visible');
      thisPrev.animate({'opacity': 1}, 500, function() {});

      $(this).html('Hide');

    } else {

      thisPrev.animate({'opacity': 0}, 500, function() {
        thisPrev.slideUp();
        thisPrev.css('visibility', 'hidden');
      });

      $(this).html('Hide');
      $(this).html('Learn More');
    }
  });

  // Function to handle slide advancement
  eiSlider.nextSlide = function() {

    var currentSlideIndex = eiSlider.currentSlideIndex,
        nextSlideIndex = currentSlideIndex + 1,
        totalSlides = $('.ei-slider-large img').length;

    // If we are already at the end of the images, loop back to the beginning
    if ( currentSlideIndex < (totalSlides - 1) ) {

      nextSlideIndex = 0;
    }

    // Trigger a click to move forward to the next slide
    $('.feature .ei-slider-nav li:eq(' + nextSlideIndex + ') a').trigger('click');
  };

  // Auto-advance the slides every 5 seconds. Adjust the value as necessary
  eiSlider.autoPlay = window.setInterval(function(){
    eiSlider.nextSlide();
  }, 5000);

});

请记住，这个答案做了一些假设，主要是eiSldier命名空间可用;如果不是，只需使用与我提供的命名空间不同的命名空间，或者将这三个新项添加到现有命名空间中，这样就不会被覆盖。在这种情况下唯一的变化不是将eiSlider定义为具有三个属性的对象，而是简单地定义eiSlider.currentSlide = 0，然后继续定义其他两个函数，就像它们之后定义的那样。例子。

如果eiSlider命名空间已经存在，则完全可能已经存在currentSlide或某些等效属性，因此如果确实存在，则可以利用它，而不是复制（或者更糟糕的是，以一种可能导致其余功能出错的方式覆盖它。）

我应该注意的一点是，当您手动点击幻灯片的导航链接时，上面的代码当前不会停止/清除自动播放。这是一个非常重要的可用性问题，需要清理。您可以使用clearInterval(eiSlider.autoPlay)来完成此操作，但为了使其真正正常工作，您需要从实际点击事件中分离出处理幻灯片推进的代码。

查看这个稍微修改过的JS Bin，它显示了自动前进的工作方式，以及上面提到的clearInterval的更改：

http://jsbin.com/gumaqefere/1/edit?html,js,console,output