Question

我目前正在网站上，并且刚刚使用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>

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)';
}
});

提前谢谢！

Answer 1

这应该有效。如果没有，请提供有效的代码段进行验证。

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);

如何将图像轮播设置为自动滑动

1 个答案: