需要幫助讓自定義幻燈片自動播放

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