gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-27 23:07:53 25 4
gpt4 key购买 nike

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

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

最佳答案

您需要将这些 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();

关于javascript - 无法在JavaScript中自动显示存储在数组中的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36452453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com