JavaScript通过mouseover事件切换li列表class并实现定时轮播效果

原有代码仅支持鼠标悬浮到对应列表项时手动切换，如需实现悬浮区域后自动按间隔轮播，可参考以下改造方案：

实现逻辑 #

• 监听列表父容器的mouseenter事件，触发后启动轮播定时器，默认每2.5秒切换一张图片，可根据需求调整间隔时长
• 监听列表父容器的mouseleave事件，触发后清除定时器，停止轮播
• 维护当前激活元素的索引值，轮播到最后一张后自动切回第一张循环播放
• 切换时自动移除上一个元素的active类，为当前元素添加active类
• 可选添加CSS过渡效果，实现图片切换的淡入淡出动画

完整代码 #

HTML代码（与原有逻辑一致，无修改） #

<div class="container">
    <div class="card">
       <ul id="list-row">
           <li class="active"><img src="https://i.imgur.com/dzyiJS2.jpg"></li>
           <li><img src="https://i.imgur.com/7BwBYPB.jpg"></li>
           <li><img src="https://i.imgur.com/HjkIPFZ.jpg"></li>
       </ul> 
    </div>
</div>

CSS代码（仅新增必要修复和可选优化项） #

*{
    padding:0;
    margin:0;
}

.container{
    height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background-color:#eee;
}

.card{
    height:400px;
    width:330px;
    background-color:#fff;
    border-radius:10px;
    box-shadow:0px 15px 30px rgba(0,0,0,0.1);
    overflow:hidden;
}

.card ul{
    list-style:none;
    position:relative;
    cursor:pointer;
    height: 300px; /* 新增：修复父容器高度塌陷问题 */
}
.card ul li{
    position:absolute;
    width:320px;
    height:300px;
    display:flex;
    align-items:center;
    justify-content:center;
    display:none;
    /* 可选：添加淡入淡出过渡效果 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card ul li.active{
    display:block !important;
    opacity: 1; /* 配合过渡效果使用，不需要过渡可删除该行 */
}

.card ul li img{
    height:100%;
    width:100%;
    object-fit:cover;
}

JavaScript代码（核心逻辑重写） #

const list = document.querySelectorAll("ul li");
const listContainer = document.getElementById("list-row");
let timer = null;
let currentIndex = 0; // 记录当前激活元素的索引

// 轮播切换公共方法
function switchItem() {
    list[currentIndex].classList.remove("active");
    currentIndex = (currentIndex + 1) % list.length;
    list[currentIndex].classList.add("active");
}

// 鼠标悬浮区域时启动轮播
listContainer.addEventListener("mouseenter", () => {
    if(timer) clearInterval(timer);
    // 第二个参数为切换间隔，单位毫秒，2000对应2秒、3000对应3秒，可自行调整
    timer = setInterval(switchItem, 2500);
});

// 鼠标离开区域时停止轮播
listContainer.addEventListener("mouseleave", () => {
    if(timer) {
        clearInterval(timer);
        timer = null;
    }
});

内容的提问来源于stack exchange，提问作者Hitesh Chauhan