gpt4 book ai didi

Javascript - html 图像幻灯片

转载 作者:行者123 更新时间:2023-11-30 20:30:45 25 4
gpt4 key购买 nike

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

<!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;

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

最佳答案

除了拼写错误和无效代码外,还有一些要评估的地方:

  1. document.imgs 不会选择带有 id='imgs' 的 DOM 元素,您需要 document.querySelector('#IdOfElement ');document.getElementById('IdOfElement');

  2. setTimeout()只会发生一次,之后就不会再发生,这种情况下你要找的方法很可能是setInterval()(这不是一个好的方法,但在这种情况下它有效,所以继续)。

  3. 我建议你制作一些免费的基础 javascript 在线类(class),并尽量注意代码,避免出现那些错别字。

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

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 图像幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50355754/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com