前端使用Javascrip實現圖片輪播

時間 2019-11-12

原文原文鏈接

Javascript實現網頁圖片自動輪播

一、建立一個img標籤

設置默認圖片，以及圖片的高度和寬度，爲了你們方便，我將CSS樣式和JS語句都寫在一個html文件中，演示用的圖片來自小明官網：'https://i1.mifile.cn/a4/xmad_15390566279642_JIicR.jpg' 和 'https://i1.mifile.cn/a4/xmad_15378467692556_lnrbU.jpg'javascript

<!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>

運行效果：
html

這樣就顯示了一張圖片在網頁上java

實現圖片輪播

如何實現圖片輪播，咱們能夠這樣思考，實現輪播就是上面a標籤的src被修改，並且是定時循環修改，這時候你就想到了js中DOM中setinterva方法，因而寫出瞭如下代碼：code

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。