如何使我的图像轮播循环而不是返回

debugcn 发表于 Dev

Skantzy

我目前正在制作图像轮播，但遇到了问题。滑块的自动功能无法正常运行。当滑块到达最后一张图像时，它会一直返回到第一张图像，从而显示之间的图像，而不是循环回到第一张图像。我可以在代码中添加些什么来实现这一目标？这是相关的代码。

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>

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

var interval = 3000; // 1000 = 1 sec
setInterval(function() {
    var offset = counter % (carouselImages.length - 2);
    carouselImages[counter].id === 'firstClone';
    carouselSlide.style.transition = "transform 0.4s ease-in-out";
    carouselSlide.style.transform = 'translateX(' + (-carouselImages[0].clientWidth * counter) + 'px)';
    counter++;


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

}, interval);

提前致谢！

乌里·默克（Uriy Merk）

解：

在HTML中的firstClone之后添加twoClone。
在步骤“ last→firstClone”之后，立即关闭动画并跳至幻灯片“ first”。之后，打开动画并转到常规轮播。

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" alt="" title="lastClone">
        <img src="./img/testpic1.jpg" alt="" title="first">
        <img src="./img/testpic2.jpg" alt="">
        <img src="./img/testpic3.jpg" alt="" title="last">
        <img src="./img/testpic1.jpg" alt="" title="firstClone">
        <img src="./img/testpic2.jpg" alt="" title="twoClone">
    </div>
</div>

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;
let durationAnimation = 400; // ms
let activeAnimation = "transform " + durationAnimation + "ms ease-in-out";
const size = carouselImages[0].clientWidth;
const updateSlideTransformX = () => {
  carouselSlide.style.transform = "translateX(" + -size * counter + "px)";
};
const changeActiveAnimation = off => {
  carouselSlide.style.transition = off === false ? "" : activeAnimation;
};

updateSlideTransformX();

let interval = 1000; // 1000 * 3 sec
setInterval(function() {
  // enable animation
  if (counter === 1) changeActiveAnimation()
  
  // to next slide
  counter++;
  updateSlideTransformX();

  if (counter >= carouselImages.length - 2) {
    counter = 1;
    setTimeout(() => {
      // disable animation & jump to slide 1
      changeActiveAnimation(false);
      updateSlideTransformX();
    }, durationAnimation);
  }
}, interval);

在线沙箱和演示。

附加解决方案-往返传送带。
在线沙箱和演示。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。