天天看點

添加特效讓你的輪播更出色

(作者:黃啟浩  撰寫時間:2019.02.01)

       各位IT小白們,在你們做輪播的時候,想做一個漸隐式的輪播非得靠插件來呢?既然這樣。小編就教小白抛開輪播插件,簡  單js就能夠有漸隐式的效果,而且非常地流暢不卡頓。思路很簡單,通過設定圖檔的透明度,并且通過透明度來切換圖檔的顯示與隐藏。

       先來吃圖:

添加特效讓你的輪播更出色

       在這裡,小編用定位将圖檔重疊在imgBox裡,然後使第一張圖檔顯示,其餘圖檔隐藏,就是使第一張圖檔透明度為1,其餘圖檔透明度為0。(show類為不透明)

       好了,來看js部分:

添加特效讓你的輪播更出色

       下一張切換按鈕代碼,判斷圖檔位置,是圖檔循環切換,然後每切換一次就加上show類,去掉前一張的類,周而複始。

添加特效讓你的輪播更出色

感謝大家的浏覽,如有疑問可在評論留言哦!