CSS3 幻灯片淡入淡出效果不起作用

Question

该代码在 JSFiddle 上工作得很好，但是当我在 HTML/CSS 文件中使用它时我无法让它工作。仅显示 50x200 图像，没有简单幻灯片或淡入淡出效果的迹象。我在 Sublime text 中工作，这会产生任何问题吗？

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>

Answer 1

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 文档底部包含脚本应该和替代方法一样有效。

CSS3 幻灯片淡入淡出效果不起作用

CSS3 Slide Show Fade Effect not working

javascript

css

fadeout

fadein