请问用transform写轮播图图效果，为什么实现不了跳转到第一张图？？？

Question

前辈好，我今天用transform这个属性想实现轮播图效果，但是有个问题我一直解决不了，所以想请教一下前辈。。这个是我的html结构，我在前后各加了两张然后我实现效果的时候，我一直无法实现当滑到最后一张时，让它瞬间跳到第2张，然后再滑到第三张，形成一个过渡效果上面那个跳转到第二张一直都没有作用，我不知道是怎么回事，这个逻辑应该没错吧，不知道到底是哪里出错了，希望能得到前辈的指教，谢谢了！PS：我还想问前辈，前辈，PC端提不提倡用CSS3写轮播图效果，因为如果用c3新属性的话，IE的话就直接无视了10以下了。IE9不支持c3动画

Answer 1

  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 就错了，实现不了 3->1。

为了避免动画时间和计时器时间重叠，用了 transitionend 这个事件。