原生鼠标移动图片切换

原生鼠标移动图片切换是指在网页中使用原生JavaScript实现的一种效果，通过监听鼠标移动事件，当鼠标移动到指定区域时，切换显示不同的图片。以下是实现原生鼠标移动图片切换的步骤：

1. 在HTML中创建一个包含多张图片的容器，例如使用`<div>`元素，并为每张图片设置一个唯一的ID。
2. 使用CSS样式为容器和图片设置合适的样式，例如设置容器的宽度、高度和背景颜色等。
3. 在JavaScript中获取容器和图片的引用，可以使用`document.getElementById()`方法。
4. 使用`addEventListener()`方法监听鼠标移动事件，例如`mousemove`事件。
5. 在事件处理函数中，根据鼠标的位置或其他条件，判断应该显示哪张图片。
6. 使用JavaScript修改容器的背景图或图片元素的`src`属性，实现图片切换效果。

下面是一个简单的示例代码：

HTML部分：

<div id="imageContainer">
  <img id="image1" src="image1.jpg">
  <img id="image2" src="image2.jpg">
</div>

CSS部分：

#imageContainer {
  width: 400px;
  height: 300px;
  background-color: #ccc;
}

#imageContainer img {
  display: none;
  width: 100%;
  height: 100%;
}

#imageContainer img.active {
  display: block;
}

JavaScript部分：

var container = document.getElementById("imageContainer");
var image1 = document.getElementById("image1");
var image2 = document.getElementById("image2");

container.addEventListener("mousemove", function(event) {
  // 根据鼠标位置或其他条件判断应该显示哪张图片
  if (event.clientX < container.offsetWidth / 2) {
    image1.classList.add("active");
    image2.classList.remove("active");
  } else {
    image1.classList.remove("active");
    image2.classList.add("active");
  }
});