js鼠标悬停图片切换

基础概念

JavaScript鼠标悬停图片切换是一种常见的网页交互效果，通过监听鼠标悬停事件（如mouseover和mouseout），实现图片的动态切换。这种效果通常用于提升用户体验，使页面更加生动和吸引人。

类型

简单切换：鼠标悬停时显示另一张图片。
渐变效果：图片切换时伴随淡入淡出或其他过渡效果。
多图轮播：悬停时可以在多张图片间循环切换。

应用场景

产品展示页：鼠标悬停在产品缩略图上显示大图或详细信息。
导航菜单：悬停时显示下拉菜单或图标变化。
轮播广告：在网页顶部或侧边栏实现动态广告切换。

示例代码

以下是一个简单的JavaScript鼠标悬停图片切换的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Hover Swap</title>
    <style>
        .image-container {
            width: 200px;
            height: 200px;
            overflow: hidden;
        }
        .image-container img {
            width: 100%;
            height: auto;
            transition: opacity 0.3s ease;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <img id="hoverImage" src="image1.jpg" alt="Image 1">
    </div>

    <script>
        const hoverImage = document.getElementById('hoverImage');
        const images = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // 图片数组
        let currentIndex = 0;

        hoverImage.addEventListener('mouseover', () => {
            currentIndex = (currentIndex + 1) % images.length;
            hoverImage.src = images[currentIndex];
        });

        hoverImage.addEventListener('mouseout', () => {
            hoverImage.src = images[0]; // 鼠标移出时恢复初始图片
        });
    </script>
</body>
</html>

可能遇到的问题及解决方法

问题1：图片切换不流畅

原因：可能是由于图片加载时间较长或JavaScript执行效率低。
解决方法：预加载图片，优化JavaScript代码，使用CSS过渡效果。

// 预加载图片
const preloadImages = (images) => {
    images.forEach(image => {
        const img = new Image();
        img.src = image;
    });
};

preloadImages(images);

问题2：图片显示不正确