js轮播图鼠标移入停止

可以通过监听鼠标移入和移出事件，来控制轮播图的播放和停止。具体实现方法如下：

1. 获取轮播图元素和图片数量

var slider = document.querySelector('.slider');
var imgs = slider.querySelectorAll('img');
var imgNum = imgs.length;

2. 定义轮播函数和定时器

var index = 0; // 当前图片下标
var timer = null; // 定时器

function changeImg() {
  for (var i = 0; i < imgNum; i++) {
    imgs[i].style.display = 'none'; // 隐藏所有图片
  }
  imgs[index].style.display = 'block'; // 显示当前图片
  index++; // 切换到下一张图片
  if (index >= imgNum) {
    index = 0; // 切换到第一张图片
  }
}

timer = setInterval(changeImg, 2000); // 每隔2秒切换一次图片

3. 监听鼠标移入和移出事件

slider.addEventListener('mouseover', function() {
  clearInterval(timer); // 鼠标移入时停止轮播
});

slider.addEventListener('mouseout', function() {
  timer = setInterval(changeImg, 2000); // 鼠标移出时继续轮播
});

完整代码如下：

<div class="slider">
  <img src="img1.jpg" alt="">
  <img src="img2.jpg" alt="">
  <img src="img3.jpg" alt="">
</div>

var slider = document.querySelector('.slider');
var imgs = slider.querySelectorAll('img');
var imgNum = imgs.length;

var index = 0;
var timer = null;

function changeImg() {
  for (var i = 0; i < imgNum; i++) {
    imgs[i].style.display = 'none';
  }
  imgs[index].style.display = 'block';
  index++;
  if (index >= imgNum) {
    index = 0;
  }
}

timer = setInterval(changeImg, 2000);

slider.addEventListener('mouseover', function() {
  clearInterval(timer);
});

slider.addEventListener('mouseout', function() {
  timer = setInterval(changeImg, 2000);
});