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