可以使用以下代码实现:

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() 函数开始轮播。

有2张轮播图当鼠标移入到图片上时setInterval停止鼠标移出时继续。这样的js代码怎么写?

原文地址: https://www.cveoy.top/t/topic/Cbm 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录