通过定时器实现:
方式1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<img src="./image/1.jpg" alt="" width="320" height="200">
<script>
//方法1
var num = 1;
function changeImg(){
let image = document.querySelector('img');
image.src = './image/'+num+'.jpg';
num++;
if(num > 7){
num = 1;
}
}
setInterval(changeImg,1000);
</script>
</body>
</html>
方法2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body onload="change()">
<img src="./image/1.jpg" alt="" width="320" height="200">
<script>
//方法2
var count = 1;
function change(){
let image = document.querySelector('img');
image.src = './image/'+count+'.jpg';
count++;
if(count > 7){
count = 1;
}
setTimeout(change,1000);
}
</script>
</body>
</html>