,可以通过以下步骤实现:
document.getElementById()
方法获取幻灯片元素,并使用addEventListener()
方法添加鼠标悬停事件监听器。var slideshow = document.getElementById('slideshow');
slideshow.addEventListener('mouseover', stopSlideshow);
clearInterval()
方法清除之前设置的定时器。function stopSlideshow() {
clearInterval(timer);
}
slideshow.addEventListener('mouseout', startSlideshow);
function startSlideshow() {
timer = setInterval(playSlideshow, 3000);
}
var slides = slideshow.getElementsByClassName('slide');
var currentSlide = 0;
function playSlideshow() {
slides[currentSlide].classList.remove('active');
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].classList.add('active');
}
这样,当鼠标悬停在幻灯片上时,幻灯片的自动播放将会停止;当鼠标离开幻灯片时,幻灯片的自动播放将会重新开始。
注意:以上代码仅为示例,实际应用中需要根据具体的HTML结构和CSS样式进行相应的调整。
领取专属 10元无门槛券
手把手带您无忧上云