<!DOCTYPE html>
<html>
<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>轮播图练习</title>
</head>
<body>
<!-- 创建一个图片标签 -->
<img id="img">
<script>
//定义一个图片数组
let arr = ["http://p1.music.126.net/wBMu9w9U8o7k4CDssm5FDg==/109951166684652624.jpg?imageView&quality=89",
"http://p1.music.126.net/82byaQmflAHb77TFu5l5HQ==/109951166682139804.jpg?imageView&quality=89",
"http://p1.music.126.net/5u6sN5t0dV1HuYjwMrgLbQ==/109951166684095755.jpg?imageView&quality=89",
"http://p1.music.126.net/k_nbrLSjaqTw1e1Qqy2zDQ==/109951166684891970.jpg?imageView&quality=89",
"http://p1.music.126.net/uVakCiFutVAzUWZXa8olzQ==/109951166681362674.jpg?imageView&quality=89"]
// 获取图片标签对象
let img = document.querySelector('#img')
//定义一个指针(下标指向)
let index = 0
// 给图片标签的地址赋初值，默认显示第一张图片
img.src = arr[index]
// setInterval()定时器，每隔指定的毫秒后，执行的定时器。
setInterval(() => {
//如果下标已经越界了，从头开始
// if(index===arr.length-1) index = -1
// if(index===arr.length) index = 0
if(++index===arr.length) index = 0
//3秒钟切换，显示下一张图片
// img.src = arr[++index]
// img.src = arr[index++]
img.src = arr[index]
}, 2000);
</script>
</body>
</html>
