課程
/前端開發
/JavaScript
/焦點圖輪播特效
如果不用JQ,直接用JavaScript可以實現淡入淡出輪播
2016-11-17
源自:焦點圖輪播特效 3-1
正在回答
我不太清楚你說的意思,是滑動的時候淡入淡出,還是上下的淡入淡出,之前我們經理做過一個上下淡入淡出的。方法是給ul一個高度(等于圖片容器li的高度)然后overflow:hidden,li的標簽是默認的不浮動,這樣每個li就會上下疊加在一起,且最后一個li會出現在我們視野里;第一次點擊的時候讓最后一個li的opacity通過一個動畫從1過渡到0;讓倒數第二個從0到1; 這樣就實現了一次淡入淡出的輪播效果。會有臨界點,就像這個老師講的,到時候判斷下就行了。原理是這樣的,具體怎么做我也不知道,因為我還沒試,懶人圖庫有好多,我一般都是用的時候復制個改改-.-
舉報
通過本教程學習您將能掌握非常實用的焦點圖輪播特效的制作過程
1 回答怎么在動畫那段代碼設置效果,例如淡入淡出
1 回答漸變的輪播圖怎么實現呢?
2 回答怎么實現全屏banner的輪播圖
1 回答請問全屏輪播div怎么實現
4 回答怎么做輪播圖
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號-11 京公網安備11010802030151號
購課補貼聯系客服咨詢優惠詳情
慕課網APP您的移動學習伙伴
掃描二維碼關注慕課網微信公眾號
2016-11-18
我不太清楚你說的意思,是滑動的時候淡入淡出,還是上下的淡入淡出,之前我們經理做過一個上下淡入淡出的。方法是給ul一個高度(等于圖片容器li的高度)然后overflow:hidden,li的標簽是默認的不浮動,這樣每個li就會上下疊加在一起,且最后一個li會出現在我們視野里;第一次點擊的時候讓最后一個li的opacity通過一個動畫從1過渡到0;讓倒數第二個從0到1; 這樣就實現了一次淡入淡出的輪播效果。會有臨界點,就像這個老師講的,到時候判斷下就行了。原理是這樣的,具體怎么做我也不知道,因為我還沒試,懶人圖庫有好多,我一般都是用的時候復制個改改-.-