Question

我正在尝试创建用户单击按钮的网页，然后页面显示保存在数组中的图像。当我运行代码时，它显示图像的来源，但不显示图像。关于我做错了什么的提示？提前致谢

<!DOCTYPE html>
<html>
<body>

<h1>Slideshow</h1>

<p>Holiday Slideshow</p>


<button type="button" onclick="beginShow()">View Slideshow</button>

<p id="p1"><img id="pic1" src="./assets/pic1.jpg">
Click on "View Slideshow". Click to display slideshow</p>
<script>
var list = [
    "/assets/pic1.jpg",
    "/assets/pic2.jpg",
    "./assets/pic3.jpg",
    "./assets/pic4.jpg"
];

var index = 0;

function beginShow() {
    setTimeout(myTimeout1, 2000) 
    setTimeout(myTimeout2, 4000) 
    setTimeout(myTimeout3, 6000)
    setTimeout(myTimeout4, 8000) 
}
function myTimeout1() {
    document.getElementById("p1").innerHTML = list[0];
}
function myTimeout2() {
    document.getElementById("p1").innerHTML = list[1];
}
function myTimeout3() {
    document.getElementById("p1").innerHTML = list[2];
}
function myTimeout4() {
    document.getElementById("p1").innerHTML = list[3];
}
</script>

    </body>
</html>

Answer 1

您需要将这些网址设置为图片而不是其容器。

您的代码应该是这样写的。

var list = [
    "/assets/pic1.jpg",
    "/assets/pic2.jpg",
    "./assets/pic3.jpg",
    "./assets/pic4.jpg"
];
function showImage(i){
    i = i || 0;
    setTimeout(function(){
        document.getElementById("pic1").src = list[i];
        i < list.length - 1 && showImage(++i);
    },2000);
}
showImage();

Answer 2

如果您打算这样做，您必须更改分配给innerHTML的内容：

document.getElementById("p1").innerHTML = '<img src=' + list[0] + '>;

但我建议你改为将image的src属性改为list [0]：

document.getElementById('pic1').setAttribute('src', list[0]);

无法在JavaScript中自动显示存储在数组中的图像

2 个答案: