鍍金池/ 問答/HTML5  HTML/ 請問用transform寫輪播圖圖效果，為什么實現(xiàn)不了跳轉(zhuǎn)到第一張圖？？？

請問用transform寫輪播圖圖效果，為什么實現(xiàn)不了跳轉(zhuǎn)到第一張圖？？？

前輩好，我今天用transform這個屬性想實現(xiàn)輪播圖效果，但是有個問題我一直解決不了，所以想請教一下前輩。。

這個是我的html結(jié)構(gòu)，我在前后各加了兩張
圖片描述

然后我實現(xiàn)效果的時候，我一直無法實現(xiàn)當(dāng)滑到最后一張時，讓它瞬間跳到第2張，然后再滑到第三張，形成一個過渡效果

圖片描述

上面那個跳轉(zhuǎn)到第二張一直都沒有作用，我不知道是怎么回事，這個邏輯應(yīng)該沒錯吧，不知道到底是哪里出錯了，

希望能得到前輩的指教，謝謝了！

PS：我還想問前輩，前輩，PC端提不提倡用CSS3寫輪播圖效果，因為如果用c3新屬性的話，IE的話就直接無視了10以下了。IE9不支持c3動畫

回答
編輯回答
礙你眼
        function play()
        {
            index++;
            car.style.transition = 'transform 1s ease';
            car.style.transform = 'translateX(' + (-index * 600) + 'px)';
            car.addEventListener('transitionend', function()
            {
                //從邊界到邊界過渡以后切回正確位置
                if (index == 4)
                {
                    index = 1;
                    car.style.transition = 'none';
                    car.style.transform = 'translateX(' + (-index * 600) + 'px)';
                }
            })            
        }

邏輯還是有問題的。
前后各加一張圖的做法思路是從保證邊界圖片到邊界圖片（3->1或1->3）的切換效果不變，在切換后瞬間改變圖片位置到正確位置。
你的 index > 3 就錯了，實現(xiàn)不了 3->1。
為了避免動畫時間和計時器時間重疊，用了 transitionend 這個事件。

2017年8月23日 18:48