原生js实现轮播图基本功能——左进右出

1、 需求

• 轮播图自动播放，图片和指示灯同时变化；
• 点击左右按钮可切换上/下一张；
• 点击指示灯可切换到对应的图片；

注意：有滚动效果但无法过滤掉中间的图片

2、效果

3、代码

html代码：

<div class="container">
    <div class="carousel">
      <div class="item"><a href=""><img src="../assets/0001.jpeg" alt=""></a></div>
      <div class="item"><a href=""><img src="../assets/0002.jpeg" alt=""></a></div>
      <div class="item"><a href=""><img src="../assets/0003.jpg" alt=""></a></div>
      <div class="item"><a href=""><img src="../assets/0004.jpeg" alt=""></a></div>
    </div>
    <div class="left">
      <svg t="1693569521007" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4000" width="20" height="20">
        <path
          d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
          p-id="4001"></path>
      </svg>
    </div>
    <div class="right">
      <svg t="1693569535119" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
        p-id="4245" width="16" height="16">
        <path
          d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
          p-id="4246"></path>
      </svg>
    </div>
    <div class="dots">
      <span class="active"></span>
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

css代码：

 * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
 
    .container {
      width: 700px;
      height: 400px;
      margin: 10px auto;
      overflow: hidden;
      position: relative;
    }
 
    .container .carousel {
      width: 100%;
      height: 100%;
      display: flex;
    }
 
    .container .carousel .item img {
      width: 700px;
      height: 400px;
    }
 
    .container .dots {
      height: 30px;
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
    }
 
    .container .dots span {
      border: 1px solid red;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      display: inline-block;
    }
 
    .container .dots span.active {
      background-color: pink;
    }
 
    .container .left {
      position: absolute;
      left: 10px;
      top: 50%;
    }
 
    .container .right {
      position: absolute;
      right: 10px;
      top: 50%;
    }

js代码：

const doms = {
    carousel: document.querySelector('.carousel'),
    dots: document.querySelectorAll('.dots span'),
    left: document.querySelector('.left'),
    right: document.querySelector('.right')
  }
  let curIndex = 0
  function moveTo(index) {
    doms.carousel.style.transition = 'transform 1s'
    doms.carousel.style.transform = `translateX(-${index}00%)`
    const active = document.querySelector('.dots span.active')
    active.classList.remove('active')
    doms.dots[index].classList.add('active')
    curIndex = index
  }

  doms.dots.forEach((item, index) => {
    item.addEventListener('click', () => {
      clearInterval(timer)
      moveTo(index)
      timer = setInterval(() => {
        rightMove()
      }, 3000)
    })
  })

  let timer = setInterval(() => {
    rightMove()
  }, 3000)
 
  function clone() {
    const first = doms.carousel.firstElementChild.cloneNode(true);
    const last = doms.carousel.lastElementChild.cloneNode(true);
    doms.carousel.appendChild(first);
    doms.carousel.insertBefore(last, doms.carousel.firstElementChild)
    last.style.position = 'absolute';
    last.style.transform = `translateX(-100%)`
  }
  clone()
 
  //实现右边的无缝滚动
  const count = doms.dots.length
  function rightMove() {
    if (curIndex === count - 1) {
      doms.carousel.style.transform = `translateX(100%)`;
      doms.carousel.style.transition = 'none';
      doms.carousel.clientHeight;
      moveTo(0)
    } else {
      moveTo(curIndex + 1)
    }
  }
  //实现左边的无缝滚动
  function leftMove() {
    if (curIndex === 0) {
      doms.carousel.style.transform = `translateX(-${count}00%)`;
      doms.carousel.style.transition = 'none';
      doms.carousel.clientHeight;
      moveTo(count - 1)
    } else {
      moveTo(curIndex - 1)
    }
  }
 
  //添加点击事件
  doms.left.addEventListener('click', () => {
    clearInterval(timer)
    leftMove()
    timer = setInterval(() => {
      rightMove()
    }, 3000)
  })
  doms.right.addEventListener('click', () => {
    clearInterval(timer)
    rightMove()
    timer = setInterval(() => {
      rightMove()
    }, 3000)
  })