CSS3幻燈片淡出效果不工作

http://jsfiddle.net/pdb4kb1a/2/CSS3幻燈片淡出效果不工作

代碼工作的的jsfiddle就好了，但我不能讓它的工作，當我在一個HTML/CSS文件中使用它。只顯示50x200圖像，沒有簡單的幻燈片或淡入淡出效果的跡象。我在Sublime文本中工作，是否會產生任何問題？

var imgArray = [ 
 
    'http://placehold.it/300x200', 
 
    'http://placehold.it/200x100', 
 
    'http://placehold.it/400x300'], 
 
    curIndex = 0; 
 
    imgDuration = 3000; 
 

 
function slideShow() { 
 
    document.getElementById('slider').className += "fadeOut"; 
 
    setTimeout(function() { 
 
     document.getElementById('slider').src = imgArray[curIndex]; 
 
     document.getElementById('slider').className = ""; 
 
    },1000); 
 
    curIndex++; 
 
    if (curIndex == imgArray.length) { curIndex = 0; } 
 
    setTimeout(slideShow, imgDuration); 
 
} 
 
slideShow();

#slider { 
 
    opacity:1; 
 
    transition: opacity 1s; 
 
} 
 

 
#slider.fadeOut { 
 
    opacity:0; 
 
}

<body> 
 
<img id="slider" src="http://placehold.it/50x200"> 
 
</body>

來源

2016-08-13 sirenleader

控制檯是否顯示任何錯誤？向我們展示您製作的HTML文件？ – Script47

這裏看起來像它的工作正常。你的HTML文件中的JavaScript？ – andreas

的jsfiddle執行在window.onload事件的JavaScript代碼。如果您在JSFiddle的編輯器中單擊JavaScript按鈕，則可以更改它。如果您將其更改爲No wrap - in <head>，您會發現它不起作用。你應該在控制檯中看到一個錯誤，告訴你原因。

我假設您在HTML文檔的head部分包含腳本片段。

如果您將問題發佈到您的問題中，您的slider尚未加載，因爲該腳本是在HTML文檔完全加載之前執行的。你必須調用換到你的slideShow功能onload事件中（或者，如果你使用jQuery你可能會使用$(document).ready(function(){ ... })代替

這應該做那麼的伎倆：

window.onload = function() { 
    slideShow(); 
}

包括腳本在你的HTML文檔的底部應該可以工作，也可以替代。

來源

2016-08-13 18:33:27 lexith

謝謝，那個fi xed它。它在或中沒有什麼不同，它得到了相同的結果！ – sirenleader

不客氣。在你身體的盡頭？這很奇怪。如果您將腳本設置爲包含在主體中，也可以在您的小提琴中使用。 – lexith

CSS3幻燈片淡出效果不工作

回答

相關問題