Javascript - html 图像幻灯片

Question

我在让我的图像幻灯片自动运行时遇到了一些麻烦。 我尝试了几种选择，但到目前为止都没有奏效。 任何帮助将不胜感激。

<!DOCTYPE html>
<html lang="en">
<body>
  <div class="container">
    <div id="showcase">
      <img id="imgs" src="./assets/img/achievement-agreement-arms-1068523.jpg">
    </div>
  </div>
<script type="text/javascript" src="./Javascript/main-slideshow.js"></script></body>
</html>

这是我的 Javascript 代码：

let slideImg=['./assets/img/achievement-agreement-arms-1068523.jpg',
'./assets/img/application-calculator-coffee-cup-1050304.jpg',
'./assets/img/chain-close-up-display-1036857.jpg',
'./assets/img/coffee-computer-cup-234394.jpg'];
let i = 0
setTimeout( function slider (){document.imgs.src = slideImg[i]; if (i<slideImg.lenght - 1) {i++;}else{i=0;}, 1000);
window.onload=slideImg;

我尝试在图像的数组列表中放置一个完整的路径，但它不起作用。

Answer 1

除了拼写错误和无效代码之外，还有一些要点需要评估：

document.imgs不会选择id='imgs'的 DOM 元素，你需要document.querySelector('#IdOfElement'); 或document.getElementById('IdOfElement');
setTimeout()只会发生一次，之后就不会再发生了，在这种情况下，您正在寻找的方法很可能是setInterval() （这不是一个好用的方法，但它在这种情况下有效，所以继续）。
我建议您制作一些基本 javascript 的免费在线课程，并尝试注意代码，避免那些拼写错误。

下面的代码可能是你需要的，请看一下。

 let slideImg=['./assets/img/achievement-agreement-arms-1068523.jpg', './assets/img/application-calculator-coffee-cup-1050304.jpg', './assets/img/chain-close-up-display-1036857.jpg', './assets/img/coffee-computer-cup-234394.jpg']; let i = 0 setInterval( function slider (){ document.querySelector('#imgs').src = slideImg[i]; console.log('new src: '+ slideImg[i]); if (i < slideImg.length - 1) { i++; }else{ i=0; } }, 1000); window.onload=slideImg;

 <div class="container"> <div id="showcase"> <img id="imgs" src="./assets/img/achievement-agreement-arms-1068523.jpg"> </div> </div>

Javascript - html 图像幻灯片

问题描述

1 个解决方案

解决方案1
1 已采纳 2018-05-15 17:22:40

Javascript - html 图像幻灯片

问题描述

1 个解决方案

解决方案1 1 已采纳 2018-05-15 17:22:40

解决方案1
1 已采纳 2018-05-15 17:22:40