js实现轮播图的完整代码

下面是JavaScript实现轮播图的完整攻略，包含两条示例说明：

一、代码实现步骤

1. 选中需要轮播的元素和轮播的图片，通过DOM操作获取其元素节点。
   js
let slider = document.querySelector(".slider");
let img = document.querySelectorAll(".slider img");

2. 设置轮播图片的宽度和高度。
   js
let imgWidth = img[0].clientWidth;
let imgHeight = img[0].clientHeight;

3. 根据图片数量，设置轮播图外层容器的宽度。
   js
slider.style.width = imgWidth * img.length + "px";

4. 设置初始值和计时器。
   ```js
   let currentIndex = 0;
   let timer = null;

function sliderStart() {
timer = setInterval(() => {
// 判断当前是否轮播到最后一张
if (currentIndex === img.length - 1) {
currentIndex = 0;
slider.style.left = 0;
}
currentIndex++;
slider.style.left = -currentIndex * imgWidth + "px";
}, 2000);
}

sliderStart();
```

1. 添加鼠标移入和移出事件控制轮播图的停止和继续。
   ```js
   slider.addEventListener("mouseover", () => {
   clearInterval(timer);
   });

slider.addEventListener("mouseout", () => {
sliderStart();
});
```

1. 通过事件委托，为小圆点添加点击事件控制轮播图的切换。
   js
let pagination = document.querySelector(".pagination");
pagination.addEventListener("click", (event) => {
// 判断点击的元素是否是小圆点
if (event.target.tagName.toLowerCase() === "li") {
// 获取小圆点的索引
let index = [...pagination.children].indexOf(event.target);
currentIndex = index;
slider.style.left = -currentIndex * imgWidth + "px";
}
});

二、示例说明

示例1：无缝轮播

以下是一段完整的JavaScript代码，实现了无缝轮播功能。效果为：当轮播到最后一张图片时，再次轮播时，会回到第一张图片，实现无缝轮播。

let slider = document.querySelector(".slider");
let img = document.querySelectorAll(".slider img");

let imgWidth = img[0].clientWidth;
let imgHeight = img[0].clientHeight;

slider.style.width = imgWidth * img.length + "px";

let currentIndex = 0;
let timer = null;

function sliderStart() {
  timer = setInterval(() => {
    // 判断当前是否轮播到最后一张
    if (currentIndex === img.length - 1) {
      currentIndex = 0;
      slider.style.left = 0;
    }
    currentIndex++;
    slider.style.left = -currentIndex * imgWidth + "px";
  }, 2000);
}

sliderStart();

slider.addEventListener("mouseover", () => {
  clearInterval(timer);
});

slider.addEventListener("mouseout", () => {
  sliderStart();
});

示例2：带有分页器的轮播

以下是一段完整的JavaScript代码，实现了带有分页器的轮播功能。效果为：点击分页器上的小圆点，可以切换到对应的轮播位置。

let slider = document.querySelector(".slider");
let img = document.querySelectorAll(".slider img");

let imgWidth = img[0].clientWidth;
let imgHeight = img[0].clientHeight;

slider.style.width = imgWidth * img.length + "px";

let currentIndex = 0;
let timer = null;

function sliderStart() {
  timer = setInterval(() => {
    if (currentIndex === img.length - 1) {
      currentIndex = 0;
      slider.style.left = 0;
    }
    currentIndex++;
    slider.style.left = -currentIndex * imgWidth + "px";
  }, 2000);
}

sliderStart();

slider.addEventListener("mouseover", () => {
  clearInterval(timer);
});

slider.addEventListener("mouseout", () => {
  sliderStart();
});

let pagination = document.querySelector(".pagination");
pagination.addEventListener("click", (event) => {
  if (event.target.tagName.toLowerCase() === "li") {
    let index = [...pagination.children].indexOf(event.target);
    currentIndex = index;
    slider.style.left = -currentIndex * imgWidth + "px";
  }
});

以上就是JavaScript实现轮播图的完整代码攻略。