我使用的是jQuery自动收报机类型的脚本。然而,它有一个特殊的问题,因为它不能无缝循环。它循环图像,然后有一个空白,然后它再次循环。我希望它在最后一个图像和第一个图像之间的距离相同的情况下无限循环。
我尝试过使用CSS处理子div的空白处,等等,但是不能让脚本删除周期之间的空格。有没有办法让这个脚本以无缝的方式循环?
脚本的JSFiddle与一些演示html。
脚本本身:
function marquee(a, b) {
var width = b.width();
var start_pos = a.width();
var end_pos = -width;
function scroll() {
if (b.position().left <= -width) {
b.css('left', start_pos);
scroll();
}
else {
time = (parseInt(b.position().left, 10) - end_pos) *
(10000 / (start_pos - end_pos)); // Increase or decrease speed by changing value 10000
b.animate({
'left': -width
}, time, 'linear', function() {
scroll();
});
}
}
b.css({
'width': width,
'left': start_pos
});
scroll(a, b);
b.mouseenter(function() { // Remove these lines
b.stop(); //
b.clearQueue(); // if you don't want
}); //
b.mouseleave(function() { // marquee to pause
scroll(a, b); //
}); // on mouse over
}
$(document).ready(function() {
marquee($('#band'), $('#band-content')); //Enter name of container element & marquee element
});https://stackoverflow.com/questions/41518008
复制相似问题