JS轮播图实现

最新推荐文章于 2024-09-24 11:55:49 发布

小菜菜love

最新推荐文章于 2024-09-24 11:55:49 发布

阅读量130

点赞数 2

分类专栏： web前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/xccevol/article/details/141262246

版权

web前端专栏收录该内容

12 篇文章 0 订阅

订阅专栏

现在轮播图的实现方式非常多，轮播图的框架也是多种多样，如果可以使用框架就直接使用框架就好，如：Swiper演示 - Swiper3|Swiper中文网

下面通过原生js的方式实现轮播图，方法很多，可以参考一下，如果有更好用的实现方式，可以交流一下：

下面代码是带有指示器和左右切换按钮，可根据需要自行修改

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>swiper</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .swiper-box {
      width: 500px;
      height: 300px;
      overflow: hidden;
      margin: 50px auto;
      position: relative;
    }

    .box {
      display: flex;
      width: 100%;
      height: 100%;
      transition: 0.5s;
    }

    .item {
      min-width: 500px;
      height: 300px;
      background-color: red;
      font-size: 30px;
      color: #fff;
      text-align: center;
      line-height: 300px;
    }

    .point-box {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 10px;
      display: flex;
    }

    .point-box .point {
      width: 20px;
      height: 20px;
      background-color: #fff;
      border-radius: 50%;
      margin: 0 10px;
    }

    .point-box .point.active {
      background-color: #000;
    }

    .btn-item {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      font-size: 30px;
      color: #000;
      cursor: pointer;
      width: 30px;
      height: 30px;
      line-height: 30px;
      background-color: #fff;
      border-radius: 50%;
      text-align: center;
    }

    .prev {
      left: 20px;
    }

    .next {
      right: 20px;
    }
  </style>
</head>

<body>
  <div class="swiper-box">
    <!-- 轮播列表 -->
    <div class="box">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <!-- 实现无缝轮播 -->
      <div class="item">1</div>
    </div>
    <!-- 指示器 -->
    <div class="point-box">
      <div class="point active"></div>
      <div class="point"></div>
      <div class="point"></div>
      <div class="point"></div>
    </div>
    <!-- 左右箭头 -->
    <div class="btn-item prev">&#10094;</div>
    <div class="btn-item next">&#10095;</div>
  </div>
  <script>
    const itemList = document.querySelectorAll('.item');
    const pointList = document.querySelectorAll('.point');
    const box = document.querySelector('.box');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');

    let _timer, currentIndex = 0;

    /**
     * 无缝轮播
     * 当轮播到最后一张时，瞬间移动到第一张，然后继续轮播
     */
    const moveTo = (index) => {
      if (index < 0) {
        box.style.transition = 'none';
        box.style.transform = `translateX(-${(itemList.length - 1) * 100}%)`;
        setTimeout(() => {
          box.style.transition = '0.5s';
          currentIndex = itemList.length - 2;
          moveTo(currentIndex);
        }, 0);
        return;
      } else if (index >= itemList.length) {
        box.style.transition = 'none';
        box.style.transform = `translateX(0)`;
        setTimeout(() => {
          box.style.transition = '0.5s';
          currentIndex = 1;
          moveTo(currentIndex);
        }, 0);
        return;
      }

      box.style.transform = `translateX(-${index * 100}%)`;
      pointList.forEach(point => point.classList.remove('active'));
      if (index === itemList.length - 1) {
        pointList[0].classList.add('active');
      } else {
        pointList[index % (itemList.length - 1)].classList.add('active');
      }
    }
    // 自动轮播
    const intervalMove = () => {
      _timer && clearInterval(_timer)
      _timer = setInterval(() => {
        currentIndex++
        moveTo(currentIndex);
      }, 3000);
    }
    intervalMove();
    // 给每个指示器绑定点击事件
    [...pointList].forEach((item, i) => item.addEventListener('click', () => {
      currentIndex = i;
      moveTo(currentIndex);
      intervalMove();
    }));
    // 上一项
    prevBtn.onclick = function () {
      currentIndex--;
      moveTo(currentIndex);
      intervalMove();
    }
    // 下一项
    nextBtn.onclick = function () {
      currentIndex++;
      moveTo(currentIndex);
      intervalMove();
    }
  </script>
</body>

</html>