我正在使用javascript进行幻灯片演示以进行课程分配,并且可以进行幻灯片演示,但未显示图像。我可以看到图像图标发生了变化,但实际图像没有显示。
<script type="text/javascript">
//put images in array
var pics = new Array();
pics[0] = new Image();
pics[0].src = "images/forest.jpg";
pics[1] = new Image();
pics[1].src = "images/mountains.jpg";
pics[2] = new Image();
pics[2].src = "images/nature.jpg";
pics[3] = new Image();
pics[3].src = "images/snowtops.jpg";
var index = 0; //start point
var piclength = pics.length - 1;
function slideshow() {
document.slide.src = pics[index];
if (index < piclength) {
index++;
}
else {
index = 0;
}
}
function slide() {
setInterval(slideshow, 3000);
}
</script>
<body onload="slide()">
<h1>Nature Photography</h1>
<main>
<section>
<p>I am an enthusiastic about nature photography. Here is a slideshow of my
works.</p>
<aside> <img id="myImage" src="images/forest.jpg" name="slide" width="95%">
</aside>
[首先,我将script标记放在HTML后面。这将使您可以缓存DOM元素,而无需等待触发“ DOMContentLoaded”事件或“ load”(窗口)事件。其次,您应该缓存“ myImage”元素。类似于const slider = document.getElementById('myImage')
。第三,检查您的控制台。也许您的图片网址有误?并确保您的HTML有效。从您发布的内容中,您丢失了很多东西(doctype,html / head标记,您没有关闭body标记等)