javascript - 前置内容

Question

重复此幻灯片中的内容的最佳方式是什么，以便当您单击 .left 并且轮播开始移动时，您会得到一个永无止境的循环？目前，如果您单击 .left，旋转木马开始移动并留下空白。

http://jsfiddle.net/tmyie/mZRQx/1/

var loop;
var moveRight = function(){
    $('.box').animate({left: '-=10'}, 100);
};

var moveLeft = function(){
    $('.box').animate({left: '+=10'}, 100);

};

$('.right').mousedown(function(){
    loop = setInterval(moveRight, 200);
}).mouseup(function(){
    clearInterval(loop);
});

$('.left').mousedown(function(){
    loop = setInterval(moveLeft, 200);
}).mouseup(function(){
    clearInterval(loop);
});

任何帮助都会很棒。

Answer 1

这是您“向左”移动的演示(尽管我认为您混淆了方向):

var moveLeft = function(){
    $('.box').animate({left: '+=10'}, 100, function(){
        var $last = $('.box').last();
        if ($last.css('left') == '100px') {
            $last.prependTo('.container').before('\n\r');
            $('.box').css('left','0px');
        }
    });
};

它检查元素是否移动了 100px，如果是的话 - 将最后一个元素移动到第一个元素之前。请注意，我还在那里添加了 CrLf 以保持原始格式和 DIV 之间的距离(如果不需要，请将其删除)。

“左”演示:http://jsfiddle.net/mZRQx/3/