<body>
<img src="./img/1.jpg" alt="">
<script>
// 1.获取元素
var oImg = document.getElementsByTagName("img")[0];
var arr = [
"./img/1.jpg",
"./img/2.jpg",
"./img/3.jpg",
"./img/4.jpg",
]
var n = 0;
function auto() {
n++;
if (n > 3) {
n = 0;
}
oImg.src = arr[n];
}
// 每隔1秒切换一张图片
var timer = setInterval(auto, 1000)
// 2.滑入图片 停止定时器
oImg.onmouseover = function () {
// 停止定时器
clearInterval(timer)
}
// 2.滑出图片 开启定时器
oImg.onmouseout = function () {
// 定时器一旦停止就没有了,如果后续需要定时器 需要再次定义
timer = setInterval(auto, 1000) // 如果带var 就变成局部变量
}
</script>
</body>