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

Question

尝试向页面添加图像幻灯片。我的代码无法正常工作。有人可以帮我吗？

这是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库来创建图像幻灯片放映会容易得多，或者您可以只使用bootstrap轮播。

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

轮播-https://getbootstrap.com/docs/4.0/components/carousel/

希望这会有所帮助！