PHP大牛成长之路：原生javascript实现轮播图

原生javascript实现轮播图

功能描述：轮播图页面加载自动播放,鼠标移入时自动停止播放并等用户操作 ,鼠标移出时, 2秒后自动播放。

文件结构如下图：
slider.html（轮播图演示页面）

<!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="static/css/slider.css" />
  </head>
  <body>
    <div class="box">
        <!-- 轮播图 -->
        <img src="static/images/banner1.jpg" alt=""data-index="1" class="slider active" />
        <img src="static/images/banner2.jpg" alt="" data-index="2" class="slider" />
        <img src="static/images/banner3.jpg" alt="" data-index="3" class="slider" />
        <img src="static/images/banner4.jpg" alt="" data-index="4" class="slider" />
        <!-- 小圆点（js动态创建） -->
        <div class="point-list"></div>
        <!-- 上一张/下一张按钮 -->
        <span class="skip prev">&lt;</span>
        <span class="skip next">&gt;</span>
    </div>
    <script src="static/js/slider.js"></script>
  </body>
</html>

slider.css（轮播图样式表文件）

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.box {
  /*定位父级*/
  position: relative;
  width: 1000px;
  height: 350px;
  margin: 0 auto;
}
.box .slider {
  width: 1000px;
  height: 350px;
  display: none;
}
.box .slider.active {
  display: block;
}
.box .point-list {
  position: absolute;
  /*绝对定位的环境下的水平居中方式*/
  left: 50%;
  margin-left: -38px;
  top: 310px;
}
.box .point-list .point {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 5px;
  background-color: white;
  border-radius: 100%;
}
.box .point-list .point.active {
  background-color: black;
}
.box .point-list .point:hover {
  cursor: pointer;
}
.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 .prev {
  left: 0;
}
.box .next {
  right: 0;
}
.box .skip:hover {
  cursor: pointer;
  opacity: 0.5;
  color: black;
}

slider.js（轮播图JS文件-主要）

// 获取轮播图片
var imgs = document.querySelectorAll("img");
// 获取小圆点组
var pointList = document.querySelector(".point-list");
// 动态生成小圆点
imgs.forEach(function (img, index) {
  var span = document.createElement("span");
  if (index == 0) span.classList.add("point", "active");
  span.classList.add("point");
  // 给当前的小圆点添加自定义的data-index
  span.dataset.index = img.dataset.index;
  pointList.appendChild(span);
});
// 获取到所有的小圆点
var points = document.querySelectorAll(".point");
// 给小圆点添加点击事件(代理)
pointList.addEventListener("click", function (ev) {
  imgs.forEach(function (img) {
    if (img.dataset.index === ev.target.dataset.index) {
      imgs.forEach(function (img) {
        img.classList.remove("active");
      });
      img.classList.add("active");
      // 设置与当前图片对应的小圆点高亮显示（调用公共函数）
      setPointActive(img.dataset.index);
    }
  });
});
// 设置与当前图片对应的小圆点高亮显示;
function setPointActive(imgIndex) {
  // 遍历所有小圆点并取消高亮
  points.forEach(function (point) {
    point.classList.remove("active");
  });
  // 遍历所有小圆点，当小圆点的dataset值与图片一致时，设置为高亮
  points.forEach(function (point) {
    if (point.dataset.index === imgIndex) point.classList.add("active");
  });
}
// -----------------  翻页功能 -----------------
// 获取翻页按钮
var skip = document.querySelectorAll(".skip");
// 添加事件
skip.item(0).addEventListener("click", prevImg, false);
skip.item(1).addEventListener("click", nextImg, false);
function prevImg(ev) {
  // 1. 获取当前的图片
  var currentImg = null;
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) {
      currentImg = img;
    }
  });
  // 2. 判断是否是点击了显示前一张的按钮?
  if (ev.target.classList.contains("prev")) {
    //   为了显示出来前一张,必须将当前图片的激活去掉
    currentImg.classList.remove("active");
    // 将当前图片的前一张图片设置为当前图片
    currentImg = currentImg.previousElementSibling;
    // console.log(currentImg);
    // 如果存在前一张,再显示它,否则进入循环,显示最后一张
    if (currentImg !== null && currentImg.nodeName === "IMG") {
      currentImg.classList.add("active");
    } else {
      currentImg = imgs[imgs.length - 1];
      currentImg.classList.add("active");
    }
  }
  // 小圆点高亮
  setPointActive(currentImg.dataset.index);
}
function nextImg(ev) {
  // 1. 获取当前的图片
  var currentImg = null;
  imgs.forEach(function (img) {
    if (img.classList.contains("active")) {
      currentImg = img;
    }
  });
  // 3. 判断是否是点击了显示下一张的按钮?
  if (ev.target.classList.contains("next")) {
    //   为了显示出来前一张,必须将当前图片的激活去掉
    currentImg.classList.remove("active");
    // 将当前图片的前一张图片设置为当前图片
    currentImg = currentImg.nextElementSibling;
    // console.log(currentImg);
    // 如果存在下一张,再显示它,否则进入循环,显示第一张
    if (currentImg !== null && currentImg.nodeName === "IMG") {
      currentImg.classList.add("active");
    } else {
      currentImg = imgs[0];
      currentImg.classList.add("active");
    }
  }
  // 小圆点高亮
  setPointActive(currentImg.dataset.index);
}
var div = document.querySelector(".box");
var playImg;
// 页面加载时自动播放
window.onload=start();
// 鼠标移出时: 播放
div.addEventListener("mouseout", start);
// 鼠标移入时: 停止
div.addEventListener("mouseover", function () {
  clearInterval(playImg);
});
function start() {
  playImg = setInterval(function () {
    // Event 对象代表事件的状态
    var event = new Event("click");
    // 派发点击事件
    skip.item(1).dispatchEvent(event);
  }, 2000);
}

总结

本来很简单的案例，根据老师8月14日的事件例子控制自动播放就行了，因为定时器的停止功能折腾半天，最后把定时器变量定在全局才实现，想想自己都觉得笨，生气中….

原生javascript实现轮播图

总结

相关文章