javascript 封装的一个实用的焦点图切换效果

一、介绍

焦点图切换效果是网站开发中常见的插件之一，也是JS封装的常见应用之一。本文将介绍如何通过JS封装一个实用的焦点图切换效果。

二、实现步骤

1. 写HTML和CSS代码。

在HTML中，我们需要写一个包含图片的容器，和几个放置小圆点的容器。在CSS中，我们可以写出容器的样式，并使用定位等属性实现图片和小圆点的位置。

1. 写JS代码。

在JS中，我们首先要获取到操作的DOM元素，使用querySelector，getElementById等函数获取。接着，我们需要添加一些事件，比如鼠标移入图片范围时停止轮播，鼠标移出继续轮播等。

然后，我们需要实现图片切换的功能。这个功能可以通过更改container的left属性来实现。我们可以在JS中设置一个全局变量，用于保存当前图片的下标，然后通过修改left值，实现图片的切换。

最后，我们同样需要实现小圆点的切换功能。这个功能可以通过为小圆点添加类名或修改样式来实现。我们也可以使用JS动态生成小圆点并添加事件监听。

三、示例说明

1. 焦点图切换效果示例：

<div class="container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>
<div class="dots">
  <span class="active"></span>
  <span></span>
  <span></span>
  <span></span>
</div>

.container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 6px;
  cursor: pointer;
}
.dots span.active {
  background-color: red;
}

const container = document.querySelector(".container");
const imgList = document.querySelectorAll(".container img");
const dots = document.querySelectorAll(".dots span");

let index = 0;
let timer;

function next() {
  index++;
  if (index === imgList.length) {
    index = 0;
  }
  change();
}

function change() {
  container.style.left = -index * 400 + "px";
  for (let i = 0; i < dots.length; i++) {
    dots[i].classList.remove("active");
  }
  dots[index].classList.add("active");
}

function play() {
  stop();
  timer = setInterval(function() {
    next();
  }, 2000);
}

function stop() {
  clearInterval(timer);
}

container.addEventListener("mouseenter", stop);
container.addEventListener("mouseleave", play);

for (let i = 0; i < dots.length; i++) {
  dots[i].addEventListener("click", function() {
    index = i;
    change();
  });
}

play();

1. 动态生成小圆点焦点图切换效果示例：

<div class="container">
  <img src="img1.jpg">
  <img src="img2.jpg">
  <img src="img3.jpg">
  <img src="img4.jpg">
</div>
<div class="dots"></div>

.container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 300px;
}
.dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
}
.dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: gray;
  margin: 0 6px;
  cursor: pointer;
}
.dots span.active {
  background-color: red;
}

const container = document.querySelector(".container");
const imgList = document.querySelectorAll(".container img");
const dots = document.querySelector(".dots");

let index = 0;
let timer;

function next() {
  index++;
  if (index === imgList.length) {
    index = 0;
  }
  change();
}

function change() {
  container.style.left = -index * 400 + "px";
  for (let i = 0; i < dots.children.length; i++) {
    dots.children[i].classList.remove("active");
  }
  dots.children[index].classList.add("active");
}

function play() {
  stop();
  timer = setInterval(function() {
    next();
  }, 2000);
}

function stop() {
  clearInterval(timer);
}

container.addEventListener("mouseenter", stop);
container.addEventListener("mouseleave", play);

for (let i = 0; i < imgList.length; i++) {
  const span = document.createElement("span");
  dots.appendChild(span);
  span.addEventListener("click", function() {
    index = i;
    change();
  });
}

play();