将图像幻灯片添加到页面中

Question

当我尝试添加图像幻灯片时，idr不起作用。

这是HTML元素：

<img class="main-img" alt="">

这是我的Javascript:

window.onload = function() {
var mainImg = document.querySelector('.main-img');
let slideshow = [
'../img/jevon_cochran_pelourinho.jpg',
'../img/jevon_cochran_quibdo.jpg',
'../img/me_in_Pernambues.JPG'
];
var index = 0;
var interval = 2000;
function slide() {
mainImg.src = slideshow[i];
index++;
if (index >= slideshow.length) {
index = 0;
}
}
setInterval(slide, interval);
}

Answer 1

在我看来，使用像slick这样的javaScript库来创建图像幻灯片会容易得多，或者您可以只使用引导转盘。

光滑-https://kenwheeler.github.io/slick/

旋转木马-https://getbootstrap.com/docs/4.0/components/carousel/

希望这能有所帮助！