圖片輪播在網頁中是一個比較常用到的一個功能,今天將用最簡單的代碼實現一個簡單的輪播效果,當然實際運用中不可能像這個這么簡單,這里呢只做效果展示,希望大家發揮更多的想象可以做的更好。
思路分析:首先在網頁中的相應位置先插入一個空的圖片(即不填src屬性),然后在JS代碼中用獲取到的圖片地址(這里用一個數組存儲模擬的一個數據)賦給空的<img>的src屬性,然后每隔指定時間再去替換掉之前的<img>元素的src屬性,以此便達到了圖片輪播效果。
參考代碼如下:
注意:這里如果在獲取圖片地址的時候,取到最后一張圖片地址時需要在下次回到第一張圖片地址,所以在上面的代碼中當i==imgNum.length時需執行i = 0操作,從而保證了下次返回第一張圖片。
實際效果:
聲明:本文由網站用戶竹子發表,超夢電商平臺僅提供信息存儲服務,版權歸原作者所有。若發現本站文章存在版權問題,如發現文章、圖片等侵權行為,請聯系我們刪除。