鍍金池/ 問答/HTML5  HTML/ 有前輩用過(guò)transition加transitionEnd事件寫過(guò)輪播圖嗎???

有前輩用過(guò)transition加transitionEnd事件寫過(guò)輪播圖嗎???

前輩好,如題,請(qǐng)問有前輩以前用過(guò)css3動(dòng)畫實(shí)現(xiàn)過(guò)無(wú)縫輪播圖的demo嗎??我想?yún)⒖家幌履銈兊脑创a是怎么寫的。。

我自己寫的時(shí)候,配合transitionend事件,無(wú)法實(shí)現(xiàn)最后一張圖的跳轉(zhuǎn),永遠(yuǎn)都是直接滑到第一張,不知道哪里問題,并且左右的按鈕點(diǎn)擊事件,快速點(diǎn)擊的話,整個(gè)圖會(huì)切出去,也就是說(shuō)transitionend事件在我快速點(diǎn)擊下一張圖的按鈕的時(shí)候,是不生效的。。。

好多坑搞不懂,所以就想來(lái)問問有沒有前輩有demo,必須是無(wú)縫滾動(dòng)的那種,并且有左右按鈕的,下標(biāo)可以不用有。。。

打擾了,望指教!

回答
編輯回答
孤島

你把index == 4放到transitionEnd里執(zhí)行,在動(dòng)畫沒有結(jié)束的時(shí)候如果鼠標(biāo)不停點(diǎn)擊,index會(huì)持續(xù)增加:
圖片描述

這樣當(dāng)transitionEnd執(zhí)行時(shí),index == 4就不會(huì)成立,所以后面的邏輯都不會(huì)執(zhí)行,也就造成了translate3d的值不斷增加顯示空白。

2018年3月16日 06:38
編輯回答
司令

題主,那個(gè)直接滑倒第一張的問題怎么解決的 :D

2017年3月14日 22:18