2

当幻灯片到达第二个“1”时,我需要它无缝重置为幻灯片“2”并给人一种无限轮播的印象,

演示:

http://jsfiddle.net/benhowdle89/cWTbn/

编码:

$('.wrapper li:first').clone().appendTo($('.wrapper ul'));
var element = $('.wrapper')[0];
element.setAttribute('data-left', 0);
setInterval(function() {
    var mL = +element.getAttribute('data-left'), t = +$('.wrapper').css('width').replace('px', ''), w = +$('.wrapper li:first').outerWidth();
    if(t == (Math.abs(mL) + w)){
        element.style.webkitTransitionTimingFunction = "none";
        element.style.webkitTransform = "none";
        element.setAttribute('data-left', 0);
    }
    element.style.webkitTransitionDuration = "0.3s";
    element.style.webkitTransitionTimingFunction = "ease-out";
    var currentL = +element.getAttribute('data-left');
    var newL = +(currentL + w);
    element.style.webkitTransform = "translate3d(-" + (newL) + "px, 0, 0)";
    element.setAttribute('data-left', newL);
}, 2000);

问题:

在幻灯片“1”之后,它会动画回到幻灯片“2”,所以我不需要它,而是快速回到幻灯片“2”(对用户不可见),

有任何想法吗?

4

1 回答 1

0

将动画移动到单独的类。由于您已经在使用 jQuery,因此可以使用以下内容:

$('.animiationClass').removeClass('animationClass').addClass('animationClass');
于 2013-04-21T20:11:38.850 回答