js手写轮播图

以下是一个简单的 JavaScript 手写轮播图示例：

HTML 代码：

<div class="slider">
  <ul class="slides">
    <li><img src="image1.jpg"></li>
    <li><img src="image2.jpg"></li>
    <li><img src="image3.jpg"></li>
  </ul>
</div>

CSS 代码：

.slider {
  position: relative;
  overflow: hidden;
  width: 600px;
  height: 400px;
}

.slides {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.slides li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.slides li.active {
  opacity: 1;
}

JavaScript 代码：

var slides = document.querySelectorAll('.slides li');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 2000);

function nextSlide() {
  slides[currentSlide].className = ' ';
  currentSlide = (currentSlide + 1) % slides.length;
  slides[currentSlide].className = 'active';
}

首先，我们通过 querySelectorAll 方法获取轮播图中所有的幻灯片元素，并将它们存储在一个变量 slides 中。然后，我们定义了一个变量 currentSlide，用于追踪当前显示的幻灯片的索引。接下来，我们设置了一个定时器 slideInterval，每隔 2 秒钟就会调用 nextSlide 函数。

nextSlide 函数的作用是将当前幻灯片的 className 属性设置为空字符串，然后将 currentSlide 索引增加 1，如果 currentSlide 索引超过了 slides 数组的长度，就将它重新设置为 0。最后，我们将下一张幻灯片的 className 属性设置为 active，这样它就会显示在轮播图中。在 CSS 中，我们使用 opacity 属性来控制幻灯片的淡入淡出效果。

这个示例只是一个基本的轮播图，还可以根据需要进行修改和扩展。例如，我们可以添加一个控制按钮，让用户可以手动切换幻灯片；我们也可以添加过渡效果，让幻灯片更加流畅地切换