有2张轮播图当鼠标移入到图片上时setInterval停止鼠标移出时继续。这样的js代码怎么写?
可以使用以下代码实现:
var slideIndex = 0;
var slides = document.getElementsByClassName("slide");
var interval;
// 自动轮播
function startSlideShow() {
interval = setInterval(function() {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {
slideIndex = 1;
}
slides[slideIndex-1].style.display = "block";
}, 2000);
}
// 鼠标移入停止轮播
for (var i = 0; i < slides.length; i++) {
slides[i].addEventListener("mouseover", function() {
clearInterval(interval);
});
}
// 鼠标移出继续轮播
for (var i = 0; i < slides.length; i++) {
slides[i].addEventListener("mouseout", function() {
startSlideShow();
});
}
// 开始轮播
startSlideShow();
其中,"slide" 是轮播图元素的 class 名称,可以根据实际情况修改。代码中,先定义了一个定时器 interval,用于自动轮播。然后,利用 for 循环为每张轮播图添加了鼠标移入和移出事件,分别停止和继续轮播。最后,调用 startSlideShow() 函数开始轮播。
原文地址: https://www.cveoy.top/t/topic/Cbm 著作权归作者所有。请勿转载和采集!