需要帮助将自定义幻灯片转到autoplay

Question

$(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 Navigation
$('.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');
    }
});
});

，但我不确定要把它放在哪里，或者是否需要对代码进行调整。

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

thanks！

如果有一种方法可以在单击幻灯片的导航链接的上下文之外跟踪幻灯片的当前状态，这可能会容易一些。我要添加的第一件事是：

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

Answer 1

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

next，您需要制作一个函数来自动处理幻灯片：

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 Navigation
  $('.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箱，显示自动采购按预期工作，以及我上面提到的Clear Interval的更改：

http：//jsbin.com/gumaqefere/1/edit？html，js，console，output