一个简易的js图片轮播效果

2023年6月11日上午4:07 • JavaScript

下面是一个关于实现“一个简易的js图片轮播效果”的完整攻略：

确定需求

首先，我们需要明确实现一个简易的js图片轮播效果的需求。具体来说，它应该具有以下特点：

需要能够自动播放图片；
需要能够通过点击左右箭头手动切换图片，点击小圆点可以快速切换到相应的图片；
图片过渡效果需要流畅自然。

准备html结构

实现一个图片轮播的首要任务就是准备好html结构。我们需要准备一个容器div，用来包含所有的图片和小圆点。例如：

<div id="carousel">
  <ul class="carousel-list">
    <li><img src="img1.jpg"></li>
    <li><img src="img2.jpg"></li>
    <li><img src="img3.jpg"></li>
    <li><img src="img4.jpg"></li>
  </ul>
  <ul class="carousel-dots">
    <li class="dot active"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
  <div class="carousel-arrow left"></div>
  <div class="carousel-arrow right"></div>
</div>

这段代码创建了一个id为“carousel”的div容器，包含了一个用来存储图片的ul.carousel-list，一个用来存储小圆点的ul.carousel-dots，以及左右箭头div.carousel-arrow。

样式设置

html结构准备好之后，我们需要对其进行样式设置。例如：

#carousel {
  position: relative;
  width: 600px;
  height: 400px;
  overflow: hidden;
}

.carousel-list {
  position: absolute;
  width: 2400px; /* 4张图片，每张600px */
  height: 400px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-list li {
  position: relative;
  float: left;
  width: 600px;
  height: 400px;
}

.carousel-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 0;
  list-style: none;
}

.carousel-dots li {
  position: relative;
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 10px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

.carousel-dots .active {
  background-color: white;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  width: 50px;
  height: 50px;
  margin-top: -25px;
  background-image: url("arrow.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  cursor: pointer;
}

.carousel-arrow.left {
  left: 20px;
}

.carousel-arrow.right {
  right: 20px;
  transform: rotate(180deg);
}

这段代码设置了轮播图容器div的样式，设置了图像列表的样式和每张图像的样式，设置了小圆点的样式和箭头的样式。

编写JavaScript代码

html和css准备好之后，我们需要编写JavaScript代码来实现图片轮播效果。我们将代码分为三个部分：自动播放、手动切换和小圆点切换。

实现自动播放

首先，我们需要通过JavaScript来实现自动播放的功能。为此，我们需要使用定时器来定时切换图片。例如：

let index = 0; // 当前图片的索引
const timer = setInterval(() => {
  index++;
  showImg(index);
}, 3000);

function showImg(index) {
  // 切换图片的逻辑
}

这段代码使用了一个变量index来记录当前显示图片的索引，然后通过setInterval()函数来每隔3秒钟执行一个函数，该函数将index增加，并调用showImg()函数来切换图片。

实现手动切换

接下来，我们需要实现通过点击箭头手动切换图片的功能。为此，我们需要为左右箭头分别添加click事件，触发时改变index的值并调用showImg()函数切换图片。例如：

document.querySelector(".carousel-arrow.left").addEventListener("click", () => {
  index--;
  showImg(index);
});

document.querySelector(".carousel-arrow.right").addEventListener("click", () => {
  index++;
  showImg(index);
});

这段代码为左右箭头分别添加了click事件，并分别在点击时调用了一个箭头的对应函数来切换图片。

实现小圆点切换

最后，我们需要实现通过点击小圆点快速切换图片的功能。为此，我们需要为每个小圆点添加click事件，并分别设置其对应的index，并调用showImg()函数。例如：

const dots = document.querySelectorAll(".carousel-dots li");
dots.forEach((dot, i) => {
  dot.addEventListener("click", () => {
    index = i;
    showImg(index);
  });
});

这段代码为所有小圆点添加了click事件，并为每个小圆点设置其对应的index值。当点击小圆点时，它会调用showImg()函数切换对应的图片。