Javascript幻灯片在一次迭代中不显示图像

Javascript slideshow shows no image for one iteration

本文关键字：迭代 显示 图像 显示图 一次 幻灯片 Javascript      更新时间：2023-09-26

幻灯片显示pic1.jpg到pic8.jpg，然后4秒没有图像，然后开始返回pic1.jpg。我想让它在pic8.jpg之后回到pic1.jpg。

下面是我的脚本: 
<script>
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"];
var i = 1;
function changeImage() {
   var image = document.getElementById('homeslideshow');
   if (i < pics.length) {
       image.src = pics[i]
       i++;
   }
   else {
       image.src = pics[i]
       i = 0;
   }
}
</script>

函数在html中调用:

<body onload="setInterval(function(){changeImage()}, 4000)">

，幻灯片显示:

<div id="section">
   <img id="homeslideshow" src="pic1.jpg" alt="goofy" width="100%" height=auto>
</div>

我是一个全新的html/css/js，所以请很好!

将else块替换为如下

else {
    i = 0;
    image.src = pics[i];
}

在您的代码中，当您在将i的值设置为0之前设置image.src时，实际上您正在使用无效的pics[8]设置图像src。

此外，在if块中image.src = pics[i] 之后缺少;。

替换你的JS如下来解决你的8秒问题

<script>
var pics = ["pic1.jpg", "pic2.jpg", "pic3.jpg", "pic4.jpg", "pic5.jpg", "pic6.jpg", "pic7.jpg", "pic8.jpg"];
var i = 0;
function changeImage() {
   var image = document.getElementById('homeslideshow');
   if (i < pics.length-1) {
       i++;
       image.src = pics[i];
   }
   else {
       i = 0;
       image.src = pics[i];
   }
}
</script>

您使用4000ms延迟。删除。setInterval(函数(){changeImage ()})

相关文章：