js淡入淡出焦点图幻灯片效果代码分享

请允许我详细讲解一下如何实现JavaScript淡入淡出焦点图幻灯片效果。

准备工作

首先，我们需要准备好HTML、CSS和JavaScript文件，并通过HTML文件引入JavaScript文件。此外，我们还需要在HTML中添加包含幻灯片图片的容器元素。

示例代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>JavaScript淡入淡出焦点图幻灯片</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="slider-wrapper">
      <img src="slide1.jpg" alt="Slide 1" class="slide">
      <img src="slide2.jpg" alt="Slide 2" class="slide">
      <img src="slide3.jpg" alt="Slide 3" class="slide">
    </div>
    <script src="script.js"></script>
  </body>
</html>

编写CSS样式

接下来，我们需要使用CSS来为幻灯片容器和幻灯片图片添加样式。在这个示例中，我们将容器设置为一个相对定位的元素，并将图片设置为绝对定位。我们还将隐藏除第一张图片以外的所有图片，并使用z-index属性来控制图片之间的层级关系。

示例代码：

.slider-wrapper {
  position: relative;
  width: 800px;
  height: 600px;
  overflow: hidden;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;
}

.slide:first-child {
  opacity: 1;
  z-index: 2;
}

编写JavaScript代码

最后，我们需要编写JavaScript代码来实现幻灯片效果。我们将使用一个自动播放、循环播放的定时器。每次定时器触发时，当前显示的图片将淡出，下一张图片将淡入。我们还将添加鼠标悬停停止播放的功能。

示例代码：

// 获取幻灯片容器元素和所有幻灯片图片元素
const sliderWrapper = document.querySelector('.slider-wrapper');
const slides = document.querySelectorAll('.slide');

// 设置图片索引变量和定时器变量
let slideIndex = 0;
let timer = null;

// 定义函数实现淡入效果
function fadeIn(element) {
  let op = 0.1;
  element.style.opacity = 0;
  element.style.display = 'block';
  function fade() {
    if (op >= 1) {
      clearInterval(fading);
    }
    element.style.opacity = op;
    op += op * 0.1;
  }
  let fading = setInterval(fade, 50);
}

// 定义函数实现淡出效果
function fadeOut(element) {
  let op = 1;
  function fade() {
    if (op <= 0.1) {
      clearInterval(fading);
      element.style.display = 'none';
    }
    element.style.opacity = op;
    op -= op * 0.1;
  }
  let fading = setInterval(fade, 50);
}

// 定义函数实现幻灯片循环播放
function playSlides() {
  // 隐藏当前显示的图片
  fadeOut(slides[slideIndex]);
  // 将图片索引加1
  slideIndex = (slideIndex + 1) % slides.length;
  // 显示下一张图片
  fadeIn(slides[slideIndex]);
}

// 开始自动播放
timer = setInterval(playSlides, 3000);

// 添加鼠标悬停停止播放功能
sliderWrapper.addEventListener('mouseover', function() {
  clearInterval(timer);
});

sliderWrapper.addEventListener('mouseout', function() {
  timer = setInterval(playSlides, 3000);
});