向页面添加图像幻灯片

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/

希望这会有所帮助！