JS实现图片轮播

html

<!-- @format -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>轮播图</title>
    <link rel="stylesheet" href="slider.css" />
  </head>
  <body>
    <div class="box">
      <img
        src="banner/banner1.jpg"
        alt=""
        data-index="1"
        class="slider active"
      />
      <img src="banner/banner2.jpg" alt="" data-index="2" class="slider" />
      <img src="banner/banner3.jpg" alt="" data-index="3" class="slider" />
      <img src="banner/banner4.jpg" alt="" data-index="4" class="slider" />
      <div class="point-list">
        <!-- <span class="point active" data-index="1"></span>
        <span class="point" data-index="2"></span>
        <span class="point" data-index="3"></span> -->
      </div>
      <span class="skip prev">&lt;</span>
      <span class="skip next">&gt;</span>
    </div>
    <script src="slider.js"></script>
  </body>
</html>

slider.js

/** @format */
//获取所有图片
var imgs = document.querySelectorAll(".box>img");
//获取小圆点父节点
var point_list = document.querySelector(".point-list");
//按图片数量生成对应小圆点
imgs.forEach(function (item, index) {
  let span = document.createElement("span");
  if (index == 0) {
    span.classList.add("active");
  }
  span.classList.add("point");
  span.dataset.index = item.dataset.index;
  point_list.append(span);
});
var points = document.querySelectorAll(".point");
//为小圆点添加点击事件
point_list.addEventListener("click", function (event) {
  //判断事件节点类型，避免父节点触发事件
  if (event.target.nodeName.toLowerCase() == "span") {
    imgs.forEach(function (img) {
      img.classList.remove("active");
      if (img.dataset.index == event.target.dataset.index) {
        img.classList.add("active");
        setPointActive(img.dataset.index);
      }
    });
  }
});
function setPointActive(index) {
  points.forEach(function (point) {
    point.classList.remove("active");
    if (point.dataset.index == index) {
      point.classList.add("active");
    }
  });
}
//-------------------翻页功能------------------------
//获取翻页按钮
var skip = document.querySelectorAll(".skip");
skip.item(0).addEventListener("click", skipImg);
skip.item(1).addEventListener("click", skipImg);
function skipImg(ev) {
  var currentImg = null;
  //获取当前显示的图片
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) {
      currentImg = img;
    }
  });
  //判断prev是否被点击
  if (ev.target.classList.contains("prev")) {
    currentImg.classList.remove("active");
    //设置当前图片为前一张图片
    currentImg = currentImg.previousElementSibling;
    // 判断当前图片是否为空，节点类型是否符合
    if (currentImg !== null && currentImg.nodeName.toLowerCase() === "img") {
      currentImg.classList.add("active");
    } else {
      currentImg = imgs[imgs.length - 1];
      currentImg.classList.add("active");
    }
  }
  //判断next是否被点击
  if (ev.target.classList.contains("next")) {
    currentImg.classList.remove("active");
    currentImg = currentImg.nextElementSibling;
    if (currentImg !== null && currentImg.nodeName.toLowerCase() === "img") {
      currentImg.classList.add("active");
    } else {
      currentImg = imgs[0];
      currentImg.classList.add("active");
    }
  }
  setPointActive(currentImg.dataset.index);
}
//----------------------------自动播放实现-----------------------
var timer = setInterval(autoPlay, 5000);
var box = document.querySelector(".box");
box.addEventListener("mouseover", function () {
  clearInterval(timer);
});
//鼠标移出后2秒开始播放下一张，并设置一个新的定时器
box.addEventListener("mouseout", function () {
  setTimeout(function () {
    autoPlay();
    timer = setInterval(autoPlay, 5000);
  }, 2000);
});
function autoPlay() {
  var currentImg = null;
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) {
      currentImg = img;
    }
  });
  currentImg.classList.remove("active");
  currentImg = currentImg.nextElementSibling;
  if (currentImg != null && currentImg.nodeName.toLowerCase() === "img") {
    currentImg.classList.add("active");
  } else {
    currentImg = imgs[0];
    currentImg.classList.add("active");
  }
  setPointActive(currentImg.dataset.index);
}

相关文章