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

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

javascript arrays image

无法在JavaScript中自动显示存储在数组中的图像,javascript,arrays,image,Javascript,Arrays,Image,我试图创建一个网页，用户单击一个按钮，然后该网页显示保存在数组中的图像。当我运行代码时，它显示图像的来源，但不显示图像。关于我做错了什么有什么建议吗？提前谢谢 <!DOCTYPE html> <html> <body> <h1>Slideshow</h1> <p>Holiday Slideshow</p> <button type="button" onclick="beginShow()">

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

<!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>


幻灯片
假日幻灯片
查看幻灯片

点击“查看幻灯片”。单击以显示幻灯片
变量列表=[
“/assets/pic1.jpg”，
“/assets/pic2.jpg”，
“/assets/pic3.jpg”，
“/资产/pic4.jpg”
];
var指数=0；
函数beginShow（）{
设置超时（MyTimeout12000）
设置超时（MyTimeout2400）
设置超时（MyTimeout36000）
设置超时（MyTimeout420000）
}
函数myTimeout1（）{
document.getElementById（“p1”）.innerHTML=list[0]；
}
函数myTimeout2（）{
document.getElementById（“p1”）.innerHTML=list[1]；
}
函数myTimeout3（）{
document.getElementById（“p1”）.innerHTML=list[2]；
}
函数myTimeout4（）{
document.getElementById（“p1”）.innerHTML=list[3]；
}

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

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

您需要将这些URL设置为图像而不是其容器

您的代码应该这样编写

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();

var列表=[
“/assets/pic1.jpg”，
“/assets/pic2.jpg”，
“/assets/pic3.jpg”，
“/资产/pic4.jpg”
];
函数showImage（i）{
i=i | | 0；
setTimeout（函数（）{
document.getElementById（“pic1”）.src=list[i]；
i

您应该更改

pic1

文档的

src

。getElementById（“pic1”）.src=list[x]谢谢您的回复，当我将代码更改为您建议的代码时，（将x替换为0,1,2,3），在浏览器中查看时不会加载图像。您能做个修改吗？所以我们可以快速测试，谢谢你的回复。当我将其更改为.setAttribute选项时，通过web浏览器查看代码时不会加载图片2、3和4。有什么建议吗？你确定你不是复制粘贴的吗？您也需要更改参数（因此将列表[0]更改为列表[1]，列表[2]等）。我更改了所有四行的参数（因此它将运行0到3）。在开发工具的网络选项卡中是否有任何错误？因为通过这种方式，您正在更改src属性，所以浏览器应该下载（或至少尝试）它…我需要在数组中的源代码之前使用句号。谢谢你的帮助！您传入了

src

作为函数变量，但随后使用了

而没有对其进行初始化。@AlexanderDixon感谢您的提示。迭代无法正常工作。在控制台中，

正在返回

NaN

。本质上，

#pic1

src

属性总是返回初始值或第一张图片。它不会递增。@AlexanderDixon我已经修复了它。它返回了几次未定义的值。这对我来说是一次学习经历，而不是对代码的批评。你能告诉我一个未定义变量的唯一工作方式是使用

for

循环方法吗？

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();