Question

幻灯片显示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的新手，所以请你好！任何帮助将不胜感激。

Answer 1

你使用4000毫秒延迟。删除它。的setInterval（函数（）{changeImage（）}）

Answer 2

将else块替换为以下

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

与您的代码一样，当您在将image.src的值设置为0之前设置i时，实际上您使用pics[8]设置了无效的图像src。 / p>

此外， ;

中的image.src = pics[i] 后，您错过了if。

<强>更新

如下所示更换您的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>

Javascript幻灯片显示一次迭代没有图像

2 个答案: