javascript - 制作这个轮播循环并跳转到第一张幻灯片

问题描述

有没有办法让这个轮播循环并跳转到第一张幻灯片

希望有一个css的解决方案，我已经尝试了几个小时，仍然无法弄清楚

我试图用 css 和 javascript 解决它，但仍然不能

注意：代码可能不会在这里工作，尝试 JSfiddle 本身或代码已经

任何帮助将不胜感激

const track = document.querySelector('.advertis__images-container-ul');
    const slides = Array.from(track.children);
    const slideWidth = slides[0].getBoundingClientRect().width;
    slides.forEach((slide, i) => {
      slide.style.left = slideWidth * i + 'px';
    });
    let x = 1;

    const changeSlide = () => {
      setTimeout(() => {
        const currentSlide = track.querySelector('.current-slide');
        const nextSlide = currentSlide.nextElementSibling;

        if (slides.length > x) {
          const amountTomove = nextSlide.style.left;
          track.style.transform = `translateX(-${amountTomove})`;
          currentSlide.classList.remove('current-slide');
          nextSlide.classList.add('current-slide');
          ++x;
        } else {
          track.children[0].classList.add('current-slide');
          track.children[x - 1].classList.remove('current-slide');
          x = 1;
        }
      }, 3000);
    };

    changeSlide();
    setInterval(() => {
      changeSlide();
    }, 3000);

.advertis {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 84.5rem;
  height: 33rem;
  overflow: hidden;


  &__images-container {
    position: relative;


    &-ul {
      transition: all 0.7s;
      position: relative;
      width: 84.6rem;
      height: 31rem;
    }

    &-li {
      list-style: none;
      position: absolute;
      width: 100%;
      margin-left: -1px;
    }

    &-img {
      object-fit: cover;
    }

  }
}

<section class="advertis">
  <div class="advertis__images-container">
    <ul class="advertis__images-container-ul">
      <li #img class="advertis__images-container-li current-slide">
        <img
          src="https://i.ibb.co/c6cD9Sw/alm-app-install-ar.png"
          alt="app advertisment"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/N1G5h0x/alm-carousel-centrepoint-ar.png"
          alt="centrepoint"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/7Q2LB01/alm-carousel-hm-ar.png"
          alt="advertisment"
          class="advertis__images-container-img"
        />
      </li>
      <li #img class="advertis__images-container-li">
        <img
          src="https://i.ibb.co/597v83c/alm-carousel-noon-ar.png"
          alt="noon"
          class="advertis__images-container-img"
        />
      </li>
    </ul>
  </div>

</section>

标签： javascripthtmlcss

javascript - 制作这个轮播循环并跳转到第一张幻灯片

问题描述

解决方案

推荐阅读