代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 1125px;
height: 352px;
margin: 50px auto;
}
#box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="box">
<img src="images/img1.jpg" alt="">
</div>
<script>
var box = document.getElementById('box');
var img = document.getElementsByTagName('img')[0];
var arr = ['images/img1.jpg', 'images/img2.jpg', 'images/img3.jpg', 'images/img4.jpg'];
var num = 0;
var timer = null;
// 开启自动切换定时器
timer = setInterval(auto, 1000);
function auto() {
num++;
if (num > arr.length - 1) {
num = 0;
}
img.src = arr[num]
}
// 盒子划过事件
box.onmouseover = function () {
clearInterval(timer);
}
// 盒子划出事件 再度开启 同一个 定时器
box.onmouseout = function () {
timer = setInterval(auto, 2000);
}
</script>
</body>
</html>
效果