能否在同一HTML区块中用两段JavaScript实现图片轮播与悬停切换功能？

我做了一个HTML区块：主容器用flex布局分左右两部分，左侧是三张垂直排列的卡片，右侧是三张绝对定位重叠的图片。已经实现了图片每5秒自动切换的功能，现在需要添加鼠标悬停任意卡片时立刻显示对应图片的功能（比如当前显示第二张图，悬停第一张卡片就切换到第一张）。

修改后的完整代码 #

HTML #

<div class="why-choose-main-container">
    <div class="why-choose-details">
        <div class="card" data-img-id="1">
            <h2>why1</h2>
        </div>
        <div class="card" data-img-id="2">
            <h2>why2</h2>
        </div>
        <div class="card" data-img-id="3">
            <h2>why3</h2>
        </div>
    </div>
    <div class="why-choose-image">
        <img src="images/50k.png" alt="img1" id="img1" class="visible">
        <img src="images/insta-pic.png" alt="img2" id="img2" class="hidden">
        <img src="images/stats.png" alt="img3" id="img3" class="hidden">
    </div>
</div>

CSS #

.why-choose-main-container {
    border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: center;
}

.why-choose-main-container .why-choose-details {
    border: 2px solid green;
}

.why-choose-main-container .why-choose-details .card {
    border: 2px solid red;
    cursor: pointer; /* 提示可交互，提升体验 */
}

.why-choose-main-container .why-choose-image {
    border: 2px solid blue;
    position: relative;
    width: 570px;
    height: 670px;
}

.why-choose-main-container .why-choose-image img {
    position: absolute;
    width: 100%;
    height: 100%;
}

.why-choose-main-container .why-choose-image img.visible {
    display: block;
}

.why-choose-main-container .why-choose-image img.hidden {
    display: none;
}

JavaScript #

let activeImageId = 1;
let nextImageId = 1;
let intervalId;

// 自动轮播核心逻辑
function startAutoSlide() {
    intervalId = setInterval(() => {
        nextImageId = nextImageId >= 3 ? 1 : nextImageId + 1;
        // 切换图片显示状态
        document.getElementById(`img${activeImageId}`).classList.replace("visible", "hidden");
        document.getElementById(`img${nextImageId}`).classList.replace("hidden", "visible");
        activeImageId = nextImageId;
    }, 5000);
}

// 初始化自动轮播
startAutoSlide();

// 切换到指定图片的通用函数
function switchToImage(targetId) {
    if (targetId === activeImageId) return; // 已经是当前图，无需操作
    
    // 切换显示状态
    document.getElementById(`img${activeImageId}`).classList.replace("visible", "hidden");
    document.getElementById(`img${targetId}`).classList.replace("hidden", "visible");
    activeImageId = targetId;
    
    // 重置轮播计时器，避免悬停后立刻自动切走
    clearInterval(intervalId);
    startAutoSlide();
}

// 给所有卡片绑定悬停事件
document.querySelectorAll('.card').forEach(card => {
    card.addEventListener('mouseover', () => {
        const targetImgId = parseInt(card.dataset.imgId);
        switchToImage(targetImgId);
    });
});

关键改动说明 #

1. HTML结构优化：删掉了冗余的内联事件，用data-img-id属性关联卡片和对应图片，结构更清晰。
2. JS逻辑简化：
   • 提取switchToImage函数统一处理图片切换，避免重复代码。
   • 悬停卡片时调用这个函数切换图片，同时重置自动轮播计时器（不然刚悬停就自动切换，体验不好）。
   • 修复了原自动轮播的边界bug：原代码中切换到第三张图后nextImageId会设为0，导致后续逻辑混乱，现在改成循环1-3。
3. CSS体验优化：给卡片加了cursor: pointer，让用户知道这是可交互元素。

内容的提问来源于stack exchange，提问作者shivani srivastav