重复此幻灯片中的内容的最佳方式是什么,以便当您单击 .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);
});
任何帮助都会很棒。
最佳答案
这是您“向左”移动的演示(尽管我认为您混淆了方向):
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 之间的距离(如果不需要,请将其删除)。
关于javascript - 前置内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21589759/