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>

下面的Java语言

// 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

javascript无法使用Slider（可能是innerHTML？）

2 个答案: