Javascript實現網頁圖片自動輪播
1、創建一個img標簽
設置默認圖片，以及圖片的高度和寬度，為了大家方便，我將CSS樣式和JS語句都寫在一個html文件中，演示用的圖片來自小明官網：'https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg' 和 'https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="">
<img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt=""> //將img標簽設置到a標簽中（可以把a標簽設置成塊顯示）並設置圖片高寬度
</a>
</body>
</html>
運行效果：
這樣就顯示了一張圖片在網頁上
實現圖片輪播
如何實現圖片輪播，我們可以這樣思考，實現輪播就是上面a標簽的src被修改，而且是定時循環修改，這時候你就想到了js中DOM中setinterva方法，於是寫出了以下代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href=""><img id="i1" src="https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg" style="width: 1266px;height: 460px" alt=""></a>
<script>
function foo()
{
//創建要輪播的圖片列表，元素為圖片地址
let imgList = ['https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg','https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'];
//找到要輪播圖片的img標簽,通過id尋找
let imgTable=document.getElementById('i1');
//獲取當前img標簽的src，
let img_src= imgTable.getAttribute('src');
//獲取當前src在圖片列表中的索引，如果該索引加一小於等於列表長度，即可索引加1，修改src播放下一張圖片
let img_index = imgList.indexOf(img_src)+1;
if (img_index<imgList.length)
{
imgTable.setAttribute('src',imgList[img_index]);
}
else
{
imgTable.setAttribute('src',imgList[0])
}
}
setInterval(foo,2000)
</script>
</body>
</html>