滑块无法通过 javascript 工作（可能是 innerHTML？）

Question

我正在尝试通过 Javascript 处理一个简单的滑块。如果你能给我一点帮助，那就太好了。谢谢你。

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

您可以使用，slideBox.innerHTML&nbsp;=&nbsp;"<img&nbsp;src='"&nbsp;+&nbsp;autoSlideImages[count].src&nbsp;+&nbsp;"'>";我相信这会解决你的问题！如果您想以更好的方式做到这一点，您可以使用我的CODEPEN DEMO

Answer 2

代替setInterval("autoSlide()",&nbsp;1500);到setInterval(autoSlide,&nbsp;1500);