Slider 不能通過 javascript 工作（可能是 innerHTML？）

Question

我正在嘗試通過 Javascript 開發一個簡單的 slider。 如果你能給我一點幫助，那就太好了。 謝謝你。

HMTL 下面

        <div class="carousel-container">
            <div class="auto-slide">

                <img src="img/cheetah.png" alt="">

                <img src="img/elephant.png" alt="">

                <img src="img/penguin.png" alt="">

                <img src="img/zebra.png" alt="">

            </div>
        </div>

Javascript 下面

// auto
const slideBox = document.querySelector(".auto-slide")
const autoSlideImages = document.querySelectorAll(".auto-slide img");

// counter
let count = 0;

function autoSlide(){
    if(count < autoSlideImages.length - 1){
        count++;
        console.log("hi.");
    }else{
        count = 0;
        console.log("bye");
    }
    slideBox.innerHTML = "<img" + autoSlideImages[count]; + ">";          
}

setInterval("autoSlide()", 1500);

再次感謝你。

Answer 1

代替

setInterval("autoSlide()", 1500);

至

setInterval(autoSlide, 1500);

Answer 2

您可以使用，

slideBox.innerHTML = "<img src='" + autoSlideImages[count].src + "'>";  

我相信這會解決你的問題！

如果您想以更好的方式做到這一點，您可以使用我的CODEPEN DEMO