Question

尝试使用javascript为类创建一个简单的幻灯片。由于某种原因，图像没有加载到div中。

脚本：

var imageArray = ['img/br1.jpg', 'img/br2.jpg', 'img/br3.png', 'img/br4.gif', 'img/br5.jpeg', 'img/br6.jpeg', 'img/br7.jpeg'];
var i = 0;

function slideShow() {
document.getElementById('slideshowdiv').src = imageArray[i];

//increment i by 1
i++;

// checks if i is greater than or equal to the length
if(i >= imageArray.length) {
    // if true, resets value to 0
    i = 0;
};

//recall the change function every 2 seconds
timer = setTimeout('slideShow()', 2000);

}
function stopShow() {
    clearTimeout(timer);
};

HTML：

<body onload="slideShow()">
<div id="slideshowdiv"></div>

Answer 1

slideshowdiv没有.src因为它是<div>而不是<img>

此：

document.getElementById('slideshowdiv').src = imageArray[i];

应该像：

var div = document.getElementById('slideshowdiv');
div.innerHTML = div.innerHTML + '<img src="' + imageArray[i] + '" />';

Answer 2

我在这里看到了一些潜在的错误。

首先，我认为您希望使用setInterval代替setTimeout。用法相同，只需更改功能名称即可。您可以只调用一次slideShow函数（就像在onload调用中那样），并让超时链接，但这会引导我们解决下一个问题。
timer变量未在slideshow函数范围之外声明。这意味着您的stopShow功能将无法看到它。在此示例中，您需要在所有代码之后调用var timer = setInterval(slideShow, 2000)。您实际上是通过在变量之前声明var来消除错误。
最后，我不认为设置src元素的<div>属性就是您想要做的事情。

最简单的解决方案是将<img>标记附加到<div>，如下所示：

var div = document.getElementById('slideshowdiv');
div.innerHTML = '<img src="' + imageArray[i] + '" />';

图像没有填充div

2 个答案: