2016-11-28 50 views
0

我的幻燈片放映(Javascript)自上次幻燈片以來正常工作,但重新啓動時不會停止指定的凍結時間。這是我的js代碼:放映幻燈片有一個奇怪的行爲

var pos; 
var slides; 
var timeOut; 
var slideTime = 3000; 

window.onload = function(){ 
    pos = -1; 
    var slideContent = document.getElementById("slides"); 
    slides = slideContent.getElementsByTagName("article"); 
    initSlides(); 
}; 

function initSlides(){ 
    if (pos !== -1){ 
     pos++; 
     if (pos === slides.length){ 
      pos = 0; 
      exitSlide(slides[slides.length-1], slides[pos]); 
     }else{ 
      exitSlide(slides[pos-1], slides[pos]); 
     } 
    }else{ 
     pos ++; 
     slides[pos].style.display = "block"; 
     timeOut = setTimeout(initSlides, slideTime); 
    } 
} 

function changeSlide(next){ 
    if (next){ 
     pos++; 
     if (pos === slides.length){ 
      pos = 0; 
      exitSlide(slides[slides.length-1], slides[pos]); 
     }else{ 
      exitSlide(slides[pos-1], slides[pos]); 
     } 
    }else{ 
     pos --; 
     if (pos === -1){ 
      pos = slides.length - 1; 
     } 
    } 
} 

function enterSlide(obj){ 
    obj.style.display = "block"; 
    var left = obj.offsetLeft; 
    var current = obj.offsetWidth; 
    obj.style.marginLeft = current + "px"; 
    function frame(){ 
     current -= obj.offsetWidth/120; 
     if (current >= left){ 
      obj.style.marginLeft = current + "px"; 
     }else{ 
      clearInterval(id); 
      timeOut = setTimeout(initSlides, slideTime); 
     } 
    } 

    var id = setInterval(frame, 1); 
} 

function exitSlide(obj, objNext){ 
    clearTimeout(timeOut); 
    var left = obj.offsetLeft; 
    var current = -obj.offsetWidth; 
    function frame(){ 
     left += current/120; 
     if (left >= current){ 
      obj.style.marginLeft = left + "px"; 
     }else{ 
      clearInterval(id); 
      obj.style.display = "none"; 
      enterSlide(objNext); 
     } 
    } 

    var id = setInterval(frame, 1); 
} 

檢查代碼控制檯不給我任何錯誤,但幻燈片顯示是如此的錯誤。從第二回合開始幻燈片不會停止,有時候幻燈片會停止,有時會顯示幻燈片,但沒有交易,有時意味着幻燈片可以正常播放,但下一張幻燈片也會被竊聽。我不知道它爲什麼發生。如果可以,請幫助我。

+0

請提供的jsfiddle或codepen。我讀了你的代碼,對我來說可能發生這種情況,因爲當你重新啓動滑塊時,你不會在var id中清除你的setInterval。 – Fefux

+0

什麼是jsFiddle?和codepen?我在每次交易結束時使用clearInterval(),這不夠嗎? –

+0

[jsFiddle](https://jsfiddle.net/)(和codepen一樣)是可以在其中模擬代碼的環境,以便我們可以看到代碼輸出並重新生成問題,因此我們可以調查它... – EhsanT

回答