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);
}
檢查代碼控制檯不給我任何錯誤,但幻燈片顯示是如此的錯誤。從第二回合開始幻燈片不會停止,有時候幻燈片會停止,有時會顯示幻燈片,但沒有交易,有時意味着幻燈片可以正常播放,但下一張幻燈片也會被竊聽。我不知道它爲什麼發生。如果可以,請幫助我。
請提供的jsfiddle或codepen。我讀了你的代碼,對我來說可能發生這種情況,因爲當你重新啓動滑塊時,你不會在var id中清除你的setInterval。 – Fefux
什麼是jsFiddle?和codepen?我在每次交易結束時使用clearInterval(),這不夠嗎? –
[jsFiddle](https://jsfiddle.net/)(和codepen一樣)是可以在其中模擬代碼的環境,以便我們可以看到代碼輸出並重新生成問題,因此我們可以調查它... – EhsanT