Javascript 如何将图像转盘设置为自动滑动

我目前正在一个网站上工作，刚刚用CSS、HTML和JavaScript创建了一个图像旋转木马。例如，我想知道如何让旋转木马每3秒钟自动更换一次幻灯片。我可以在代码中添加什么来实现这一点？这是我的密码。”

HTML:

HTML:

     ...<div class="carousel-container">
        <i class="fa fa-angle-left" id="prevBtn"></i>
        <i class="fa fa-angle-right" id="nextBtn"></i>
        <div class="carousel-slide">
            <img src="./img/testpic3.jpg" id="lastClone" alt="">
            <img src="./img/testpic1.jpg" alt="">
            <img src="./img/testpic2.jpg" alt="">
            <img src="./img/testpic3.jpg" alt="">
            <img src="./img/testpic1.jpg" id="firstClone" alt="">
        </div>
    </div>
</div>

HTML：
...

JavaScript:

JavaScript:

const carouselSlide = document.querySelector('.carousel-slide');
const carouselImages = document.querySelectorAll('.carousel-slide img');


const prevBtn = document.querySelector('#prevBtn');
const nextBtn = document.querySelector('#nextBtn');


let counter = 1;
const size = carouselImages[0].clientWidth;

carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';


nextBtn.addEventListener('click', () => {
if (counter >= carouselImages.length - 1) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter++;
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

});
prevBtn.addEventListener('click', () => {
if (counter <= 0) return;
carouselSlide.style.transition = "transform 0.4s ease-in-out";
counter--;
carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';

});

carouselSlide.addEventListener('transitionend', () => {
console.log(carouselImages[counter]);
if (carouselImages[counter].id === 'lastClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - 2;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
if (carouselImages[counter].id === 'firstClone') {
carouselSlide.style.transition = "none";
counter = carouselImages.length - counter;
carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
});

JavaScript:
const carouselSlide=document.querySelector（“.carousel slide”）；
const carouselImages=document.queryselectoral（'.carousel slide img'）；
const prevBtn=document.querySelector（“#prevBtn”）；
const nextBtn=document.querySelector（'#nextBtn'）；
设计数器=1；
const size=carouselImages[0]。客户端宽度；
carouselSlide.style.transform='translateX（+（-carouselImages[0].clientWidth*counter）+'px'）；
nextBtn.addEventListener（'单击'，（）=>{
如果（计数器>=carouselImages.length-1）返回；
carouselSlide.style.transition=“转换0.4s轻松输入输出”；
计数器++；
carouselSlide.style.transform='translateX（+（-carouselImages[0].clientWidth*counter）+'px'）；
});
prevBtn.addEventListener（'单击'，（）=>{
if（计数器{
控制台日志（旋转木马[柜台]）；
if（旋转木马[计数器].id==='lastClone'）{
carouselSlide.style.transition=“无”；
计数器=旋转木马长度-2；
carouselSlide.style.transform='translateX（+-size*计数器）+'px'；
}
if（转盘图像[计数器].id=='firstClone'）{
carouselSlide.style.transition=“无”；
计数器=旋转木马长度-计数器；
carouselSlide.style.transform='translateX（+-size*计数器）+'px'；
}
});

---

提前谢谢！

这应该有效。如果没有，请提供一个工作片段进行验证

var interval = 3000; // 1000 = 1 sec
setInterval(function(){ 

    var offset = counter%(carouselImages.length);
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * offset) + 'px)';
    counter++;

    if(offset == 0) counter = 1; // to reset counter so next and prev button should work 

}, interval);

---

这需要一个工作片段才能得到答案。当前您发布的代码没有呈现任何内容。使用

setInterval

。工作正常，但我的第三张图片出现片刻后消失。我将（carouselImages.length）更改为（carouselImages.length-2）但是现在不是循环回到第一张图片，而是回到第一张图片，在很短的时间内曝光第二张图片。每张图片都应该精确显示“间隔”秒，除非有其他改变。