Javascript - html 图像幻灯片
[英]Javascript - html image slideshow
问题描述
I am having some trouble getting my image slideshow to run automatically.
我在让我的图像幻灯片自动运行时遇到了一些麻烦。 I have tried several options but none has worked so far.我尝试了几种选择，但到目前为止都没有奏效。 Any help would be greatly appreciated.任何帮助将不胜感激。
<!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>
This is my Javascript code:这是我的 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;
I tried placing a complete path in the array list for the images, but it doesn't work.我尝试在图像的数组列表中放置一个完整的路径，但它不起作用。
1 个解决方案
解决方案1
1 已采纳 2018-05-15 17:22:40
Besides the typos and invalid codes, there's some points to be evaluated:除了拼写错误和无效代码之外，还有一些要点需要评估：
document.imgsis not going to select a DOM element withid='imgs', you needdocument.querySelector('#IdOfElement');document.imgs不会选择id='imgs'的 DOM 元素，你需要document.querySelector('#IdOfElement');ordocument.getElementById('IdOfElement');或document.getElementById('IdOfElement');setTimeout()will only happen once, after that, it won't happen again, in this case the method you are looking for is probablesetInterval()(it's not a good method to be used, but it works in this case, so go on).setTimeout()只会发生一次，之后就不会再发生了，在这种情况下，您正在寻找的方法很可能是setInterval()（这不是一个好用的方法，但它在这种情况下有效，所以继续）。I suggest you to make some free online course of basic javascript and also try to pay attention to the code, avoidin those typos you had.
我建议您制作一些基本 javascript 的免费在线课程，并尝试注意代码，避免那些拼写错误。
The code below s probably what you need, please take a look.下面的代码可能是你需要的，请看一下。
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.