Question

我目前正在网站上，并且刚刚使用CSS，HTML和JavaScript创建了图像轮播。例如，我在徘徊如何使旋转木马每3秒自动更换一次幻灯片。我可以在代码中添加些什么来实现这一目标？这是我的代码。

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>

CSS：

 .carousel-container {
 width: 70%;
 max-height: 800px;
 margin: auto;
 margin-top: 1%;
 overflow: hidden;
 border: 5px solid white;
 }

 .carousel-slide {
 display: flex;
 width: 100%;
 height: 400px;
 }

 #prevBtn {
 position: absolute;
 top: 45%;
 z-index: 10;
 left: 20%;
 font-size: 50px;
 color: white;
 opacity: 0.5;
 cursor: pointer;
 }

 #nextBtn {
 position: absolute;
 top: 45%;
 z-index: 10;
 right: 20%;
 font-size: 50px;
 color: white;
 opacity: 0.5;
 cursor: pointer;
 }

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

如果没有演示图片，我无法构建一个有效的示例，但是您是否尝试过类似的方法？

function timeFunction() {
        setTimeout(function(){ nextBtn.dispatchEvent('click')}, 3000);
    }

https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events

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

1 个答案: