滑动重复的背景图像

Question

我有一个带有一堆标识的背景图像，我想逐渐向左滑动以模拟股票报价器。我知道有一些插件可以滑动多张图片，但这在我的场景中效果最好。

我如何逐步添加新类，如下所示：

<div class="background-slider-start"></div>

.background-slider-start {
    background: url('my-image.png') repeat-x 0 0;
}
.background-slider-end {
    background: url('my-image.png') repeat-x -5000px 0;
}

$('.background-slider-start).addClass('background-slider-end', 30000);

Answer 1

addClass不接受持续时间，您可以尝试使用CSS3转换：

.background-slider-start {
    background: url('my-image.png') repeat-x 0 0;
    -webkit-transition: background 30s;
    -moz-transition: background 30s;
    -o-transition: background 30s;
    transition: background 30s;
}

setInterval(function(){
    $('.background-slider-start').toggleClass('background-slider-end');
}, 30000);