JS制作轮播图

1. 轮播图

1.1 轮播图片如下：

1.2 代码如下：

html部分：

<!-- 1. 先写好html，样式设置好 -->
  <div class="box">
    <img src="./banner/banner1.jpg" alt="图片无法正常加载..." class="slider active" data-index="1" />
    <img src="./banner/banner2.jpg" alt="图片无法正常加载..." class="slider" data-index="2" />
    <img src="./banner/banner3.jpg" alt="图片无法正常加载..." class="slider" data-index="3" />
    <img src="./banner/banner4.jpg" alt="图片无法正常加载..." class="slider" data-index="4" />
    <div class="pointAll">
      <!-- 2. 开始写JS的时候将这里注释，因为这些小圆点是后面通过JS动态生成的 -->
      <!-- <span class="point active"></span>
      <span class="point"></span>
      <span class="point"></span>
      <span class="point"></span> -->
    </div>
    <span class="skip prev">&lt</span>
    <span class="skip next">&gt</span>
  </div>

CSS部分：

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .box {
      position: relative;
      width: 1000px;
      margin: 20px auto;
    }
    .box .slider {
      width: 1000px;
      height: 350px;
      display: none;
    }
    .box .slider.active {
      display: block;
    }
    .pointAll .point {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 100%;
      margin: 0 5px;
      background-color: white;
    }
    .pointAll .point:hover {
      cursor: pointer;
    }
    .pointAll .point.active {
      background-color: black;
    }
    .pointAll {
      position: absolute;
      top: 320px;
      left: 50%;
    }
    .box .skip {
      position: absolute;
      top: 140px;
      display: inline-block;
      width: 40px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background-color: lightgray;
      color: white;
      opacity: 0.2;
      font-size: 36px;
    }
    .box .skip:hover {
      opacity: 0.5;
      cursor: pointer;
      color: black;
    }
    .box .skip.prev {
      left: 0;
      border-radius: 0 20% 20% 0;
    }
    .box .skip.next {
      right: 0;
      border-radius: 20% 0 0 20%;
    }
  </style>

JS部分：

  <script>
    // 3. 获取所有的图片
    let imgs = document.querySelectorAll('.box .slider');
    // console.log(imgs);
    let pointAll = document.querySelector('.pointAll');
    // 4. 根据图片的数量动态生成所有的小圆点，并将第一张图片设置为默认
    imgs.forEach(function (img, index) {
      let span = document.createElement('span');
      if (index === 0) {
        span.classList.add('point', 'active');
      }
      span.classList.add('point');
      // 一定要将图片的自定义索引赋给小圆点
      span.dataset.index = img.dataset.index;
      pointAll.appendChild(span);
    });
    // 5. 获取所有的小圆点，对其父级绑定事件（事件代理）
    let points = document.querySelectorAll('.point');
    // console.log(points);
    pointAll.addEventListener('click', function (ev) {
      // console.log(ev.target);
      // 通过事件触发者的data-index去找到对应索引的图片，并显示出来
      imgs.forEach(function (img) {
        if (ev.target.dataset.index === img.dataset.index) {
          imgs.forEach(function (img) {
            img.classList.remove('active');
          });
          img.classList.add('active');
          // 找到对应的图片以后也要将对应的小圆点的设置高亮
          // 将小圆点高亮写成一个公共函数，因为后面点击箭头的时候还会用到
          setPointActive(ev.target.dataset.index);
        }
      });
    }, false);
    // 6. 小圆点高亮公共方法
    function setPointActive(index) {
      // 先清空所有小圆点高亮样式
      points.forEach(function (point) {
        point.classList.remove('active');
      });
      // 根据传过来的当前索引找到对应的小圆点，然后高亮显示
      points.forEach(function (point) {
        if (point.dataset.index === index) {
          point.classList.add('active');
        }
      });
    }
    // 7. 获取前一张和下一张箭头
    let skips = document.querySelectorAll('.skip');
    // console.log(skips);
    // 8. 对两个箭头绑定事件
    skips[0].addEventListener('click', skipImg, false);
    skips[1].addEventListener('click', skipImg, false);
    function skipImg(ev) {
      // 先拿到当前的图片
      let nowImg = null;
      imgs.forEach(function (img) {
        if (img.classList.contains('active')) {
          nowImg = img;
        }
      });
      // console.log(nowImg);
      // 9. 判断点击的箭头是哪一个
      // 如果是前一张
      if (ev.target.classList.contains('prev')) {
        nowImg.classList.remove('active');
        nowImg = nowImg.previousElementSibling;
        // 判断前一张图片是否存在
        if (nowImg !== null && nowImg.nodeName === "IMG") {
          nowImg.classList.add('active');
        } else {
          nowImg = imgs[imgs.length - 1];
          nowImg.classList.add('active');
        }
      }
      // 如果是下一张
      if (ev.target.classList.contains('next')) {
        nowImg.classList.remove('active');
        nowImg = nowImg.nextElementSibling;
        // 判断后一张图片是否存在
        if (nowImg !== null && nowImg.nodeName === "IMG") {
          nowImg.classList.add('active');
        } else {
          nowImg = imgs[0];
          nowImg.classList.add('active');
        }
      }
      // 小圆点跟随当前图片的自定义索引高亮
      setPointActive(nowImg.dataset.index);
    }
    // 10. 设置自动播放
    // 定义一个周期性计时器
    let timer = setInterval(show, 2000);
    function show() {
      // 先找到当前图片
      let nowImg = null;
      imgs.forEach(function (img) {
        if (img.classList.contains('active')) {
          nowImg = img;
        }
      });
      nowImg.classList.remove('active');
      nowImg = nowImg.nextElementSibling;
      // 判断下一张图片是否存在
      if (nowImg !== null && nowImg.nodeName === "IMG") {
        nowImg.classList.add('active');
      } else {
        nowImg = imgs[0];
        nowImg.classList.add('active');
      }
      setPointActive(nowImg.dataset.index);
    }
    // 获取到轮播图
    let box = document.querySelector('.box');
    // 鼠标移入时关闭计时器
    box.addEventListener('mouseover', function () {
      clearInterval(timer);
    }, false);
    // 鼠标移出时重新开启
    box.addEventListener('mouseout', function () {
      timer = setInterval(show, 2000);
    }, false);
  </script>

1.3 效果如下：

点击小圆点时：

点击箭头时：

自动播放：

1. 轮播图

相关文章