js/jquery自制滑塊腳本

我有一個我創建的jQuery滑塊腳本的問題。當我的瀏覽器長時間打開我的頁面時，會出現此問題：滑塊加速。js/jquery自制滑塊腳本

這裏是我的JS代碼：

function intervalTrigger() { 
     return window.setInterval(function() 
      { 
       $("#sliderControl ul li.currentSlideControl").removeClass("currentSlideControl"); 
       $("#sliderControl ul li:eq("+nextSlide+")").addClass("currentSlideControl"); 

       $("#topSlider ul.slider li.currentSlide").fadeTo(1500, 0).removeClass("currentSlide"); 
       $("#topSlider ul.slider li:eq("+nextSlide+")").fadeTo(1500, 1.0).addClass("currentSlide"); 
       nextSlide = ((nextSlide+1) < nbSlides) ? nextSlide+1 : 0; 

      }, 5000); 
     } 
    var id = intervalTrigger();

正如你所看到的，每張幻燈片之間的間隔爲5秒，但如果我在頁面打開很長一段時間，滑塊加速和幻燈片走得很快速。

有人告訴我，我必須解除間隔，但我不知道該怎麼做。：/

有人可以幫助我嗎？

PS：抱歉我的英文不好。 :(

來源

2014-10-29 DjiBi

你運行的$（document）這個腳本。就緒（）建設 – 2014-10-29 07:53:58

@GlenSwift你對此有何評論和OP之間的聯繫;我想腳本可能開始工作之前，滑塊圖像節點加載 – 2014-10-29 07:54:32

@RajaprabhuAravindasamy計算複製問題？順便說一下，哪些變量是'nextSlide'和'nbSlides'？ – 2014-10-29 07:55:46

Glen Swift - >是的，我運行它$（document）.ready（function（）{...}）; pumpkinzzz - >這可能是我的問題的來源，但我不知道如何解決這個問題：/

這裏是我的完整功能：

$(document).ready(function() { 


//////////////// 
// TOP SLIDER // 
//////////////// 

var nbSlides = $("#topSlider ul.slider li").length; 

for(var i=0; i<nbSlides; i++) { $("#sliderControl ul").append('<li><a href="#"></a></li>'); } 
$("#sliderControl ul li:eq(0)").addClass("currentSlideControl"); 

$("#topSlider ul li:eq(0)").addClass("currentSlide"); 

var currentSlide = 0; 
var nextSlide = ((currentSlide+1)<nbSlides) ? currentSlide+1 : 0; 
$("#topSlider ul.slider li.currentSlide").show(); 

if(nbSlides > 1) { 

    function intervalTrigger() { 
     return window.setInterval(function() 
      { 
       $("#sliderControl ul li.currentSlideControl").removeClass("currentSlideControl"); 
       $("#sliderControl ul li:eq("+nextSlide+")").addClass("currentSlideControl"); 

       $("#topSlider ul.slider li.currentSlide").fadeTo(1500, 0).removeClass("currentSlide"); 
       $("#topSlider ul.slider li:eq("+nextSlide+")").fadeTo(1500, 1.0).addClass("currentSlide"); 
       nextSlide = ((nextSlide+1) < nbSlides) ? nextSlide+1 : 0; 

      }, 5000); 
     } 
    var id = intervalTrigger(); 


    $("#sliderControl ul li a").click(function() { 

     $(this).stop(); 

     $("#sliderControl ul li.currentSlideControl").removeClass("currentSlideControl"); 
     $(this).parent().addClass("currentSlideControl"); 
     var slideIndex = $(this).parent().index(); 


     $("#topSlider ul.slider li.currentSlide").fadeTo(1500, 0).removeClass("currentSlide"); 
     $("#topSlider ul.slider li:eq("+slideIndex+")").fadeTo(1500, 1.0).addClass("currentSlide"); 

     clearInterval(id); 
     return false; 

    }); 
}

來源

2014-10-30 08:37:55 DjiBi

js/jquery自制滑塊腳本

回答

相關問題