js焦点图轮播代码

以下是一个简单的 JavaScript 焦点图轮播代码示例：

HTML：

<div class="slider">
  <img src="img1.jpg" alt="Image 1">
  <img src="img2.jpg" alt="Image 2">
  <img src="img3.jpg" alt="Image 3">
</div>

CSS：

.slider {
  position: relative;
  width: 100%;
  height: 300px;
  overflow: hidden;
}

.slider img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

.slider img.active {
  opacity: 1;
}

JavaScript：

var images = document.querySelectorAll('.slider img');
var current = 0;

function showImage(n) {
  images[current].className = '';
  current = (n + images.length) % images.length;
  images[current].className = 'active';
}

var slideInterval = setInterval(showNext, 5000);

function showNext() {
  showImage(current + 1);
}

function showPrevious() {
  showImage(current - 1);
}

var next = document.getElementById('next');
var previous = document.getElementById('previous');

next.onclick = function() {
  clearInterval(slideInterval);
  showNext();
  slideInterval = setInterval(showNext, 5000);
};

previous.onclick = function() {
  clearInterval(slideInterval);
  showPrevious();
  slideInterval = setInterval(showNext, 5000);
};

这段代码创建了一个具有 "slider" 类的容器，并在其中放置了三个图像。CSS 将容器设置为相对定位，并设置了一个固定高度和隐藏溢出。图像被设置为绝对定位，每个图像的初始不透明度为 0，并且它们都具有 1 秒的渐变效果。JavaScript 部分定义了一个 "showImage" 函数，该函数接受一个数字参数 n，用于确定要显示的图像。 "current" 变量跟踪当前显示的图像的索引。 "showImage" 函数根据 n 参数更新 "current" 变量，并根据类名 "active" 显示对应的图像。 "showNext" 函数调用 "showImage" 函数并传递 current + 1 作为参数，以显示下一个图像。 "showPrevious" 函数类似，但是传递 current - 1 作为参数，以显示前一个图像。 "slideInterval" 变量保存 setInterval 函数的返回值，该函数每隔 5 秒调用一次 showNext 函数。 "next" 和 "previous" 变量是指向 HTML 中 id 为 "next" 和 "previous" 的元素的引用，这些元素是用作下一个和上一个按钮的链接。当单击这些按钮时，分别清除 slideInterval，显示下一个或前一个图像，并重新启动 slideInterval。