<!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>輪播圖練習(xí)</title>
</head>
<body>
? ? <!-- 創(chuàng)建一個圖片標(biāo)簽 -->
? ? <img id="img">
? ? <script>
? ? ? ? //定義一個圖片數(shù)組
? ? ? ? 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"]
? ? ? ? // 獲取圖片標(biāo)簽對象
? ? ? ? let img = document.querySelector('#img')
? ? ? ? //定義一個指針(下標(biāo)指向)
? ? ? ? let index = 0
? ? ? ? // 給圖片標(biāo)簽的地址賦初值，默認(rèn)顯示第一張圖片
? ? ? ? img.src = arr[index]
? ? ? ? // setInterval()定時器，每隔指定的毫秒后，執(zhí)行的定時器。
? ? ? ? setInterval(() => {
????????????//如果下標(biāo)已經(jīng)越界了，從頭開始
? ? ? ? ? ? // 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>
