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