在产品列表中 ，当鼠标滑在某个产品时，相应产品进行轮播案例
在里面中
.index-Product-list-lbt为轮播列，进入页面时默认内容一是显示的。
如果当鼠标滑在.index-Product-list-lbt上，相应直接显示内容二，1.5秒后继续轮播下一个内容,当轮播最后一个内容时，也是接着1.5秒后又轮播第一个内容，1.5后接着下一个内容 这样循环轮播；
如果当鼠标移除不滑在.index-Product-list-lbt上，又回到进入页面时默认内容一。
这个js怎样实现？
<style >
.index-Product-Category-lbt{display: flex;flex-wrap:wrap;}
.index-Product-Category-lbt .index-Product-list-lbt{width: 50%;padding:3%;height: 280px;}
.index-Product-Category-lbt .index-Product-list-lbt a{display: none;}
.index-Product-Category-lbt .index-Product-list-lbt a.active{display: block;}
</style>
<div class="index-Product-Category-lbt">
<div class="index-Product-list-lbt">
<a href="" class="active">内容一</a>
<a href="" class="">内容二</a>
<a href="" class="">内容三</a>
</div>
<div class="index-Product-list-lbt">
<a href="" class="active">内容一</a>
<a href="" class="">内容二</a>
<a href="" class="">内容三</a>
</div>
<div class="index-Product-list-lbt">
<a href="" class="active">内容一</a>
<a href="" class="">内容二</a>
<a href="" class="">内容三</a>
</div>
</div>
<script>
document.querySelectorAll('.index-Product-list-lbt').forEach(gallery => {
const links = gallery.querySelectorAll('.index-Product-list-lbt a');
let index = 0;
let interval;
function startSlideshow() {
clearInterval(interval);
interval = setInterval(() => {
links[index].classList.remove('active');
index = (index + 1) % links.length;
links[index].classList.add('active');
}, 1500); // 每1.5秒切换一次
}
function stopSlideshow() {
clearInterval(interval);
links.forEach(link => link.classList.remove('active'));
index = 0; // 重置索引
links[index].classList.add('active'); // 确保停止时，第一项始终为active
}
gallery.addEventListener('mouseover', () => {
links.forEach(link => link.classList.remove('active'));
index = 1; // 设置索引为第二个元素
links[index].classList.add('active'); // 立即显示第二个内容
startSlideshow(); // 从第二个内容开始轮播
});
gallery.addEventListener('mouseout', stopSlideshow);
// 初始化显示第一项
if (links.length > 0) {
links[0].classList.add('active');
}
});
</script>
