需要帮助让自定义幻灯片自动播放

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 
}; 

然后，里面的功能我上面提到的，作为企业的检查滑动是否已经激活内的第一份订单，我D收藏此：

// 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'); 
}; 

我也感动设置搜索工作g给定幻灯片的导航链接上的“活动”类发生在逻辑内部，确保您点击的幻灯片尚未激活，以确保它不会被错误设置。

最后，您可以使用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斌，显示自动提前按预期工作，加上我与clearInterval上述变化：

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