js实现鼠标切换图片（无定时器）

JS实现鼠标切换图片（无定时器）的攻略如下：

步骤一：搭建HTML结构

首先，我们需要搭建一个HTML结构，用于展示图片和显示鼠标切换效果。具体可以参考下面的代码示例：

<div class="img-wrapper">
  <img src="https://picsum.photos/id/1/200/300" alt="image1">
  <img src="https://picsum.photos/id/2/200/300" alt="image2">
  <img src="https://picsum.photos/id/3/200/300" alt="image3">
  <img src="https://picsum.photos/id/4/200/300" alt="image4">
</div>
<div class="dots">
  <span class="dot active"></span>
  <span class="dot"></span>
  <span class="dot"></span>
  <span class="dot"></span>
</div>

其中，<div class="img-wrapper"> 是用来包含多张图片的容器，<div class="dots"> 是用来展示鼠标切换效果的点点容器，目的是让用户知道当前正在查看的是哪张图片。

步骤二：编写CSS样式

接下来，我们需要编写CSS样式，以便美化页面和实现鼠标切换效果。具体可以参考下面的代码示例：

.img-wrapper {
  position: relative;
  height: 300px;
}
.img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}
.img-wrapper img.active {
  opacity: 1;
}
.dots {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.dot {
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background-color: #ddd;
  margin: 0 5px;
  cursor: pointer;
}
.dot.active {
  background-color: #333;
}

其中，.img-wrapper 的布局使用了 position: relative; 和 position: absolute; 来实现图片的重叠效果。opacity 属性用于控制图片的透明度，.img-wrapper img.active 表示当前显示的图片。.dots 使用了 display: flex; 和 justify-content: center; 属性来让点点居中展示，.dot.active 表示当前展示的点点。

步骤三：编写JavaScript

最后，我们需要编写JavaScript代码来实现鼠标切换图片的效果。我们可以通过监听 .dot 元素的点击事件来实现，具体可以参考下面的代码示例：

const dots = document.querySelectorAll('.dot');
const images = document.querySelectorAll('.img-wrapper img');

// 监听点点的点击事件
dots.forEach((dot, index) => {
  dot.addEventListener('click', () => {
    // 移除之前的 active 类名
    dots.forEach((dot) => dot.classList.remove('active'));
    images.forEach((image) => image.classList.remove('active'));

    // 给当前点击的点点和图片添加 active 类名
    dot.classList.add('active');
    images[index].classList.add('active');
  })
})

其中，document.querySelectorAll() 方法用于获取所有的 .dot 和 .img-wrapper img 元素，然后我们使用 .forEach() 方法遍历所有的 .dot 元素，给每个元素添加点击事件。当点击某个点点时，我们首先需要移除之前所有元素上的 active 类名，然后给当前点击的点点和对应的图片添加 active 类名。

示例说明

示例1：动态切换壁纸

示例2：切换多组图片（滑动切换）

以上就是JS实现鼠标切换图片（无定时器）的完整攻略，希望对你有所帮助。