Question

代码在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>

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幻灯片放映淡化效果不起作用

1 个答案: