Javascript 滑动重复的背景图像
我有一个背景图像和一堆徽标,我想逐渐向左滑动以模拟股票行情。我知道有插件可以滑动多个图像,但这在我的场景中效果最好 我将如何逐步添加新类,如下所示:Javascript 滑动重复的背景图像,javascript,jquery,Javascript,Jquery,我有一个背景图像和一堆徽标,我想逐渐向左滑动以模拟股票行情。我知道有插件可以滑动多个图像,但这在我的场景中效果最好 我将如何逐步添加新类,如下所示: <div class="background-slider-start"></div> .background-slider-start { background: url('my-image.png') repeat-x 0 0; } .background-slider-end { background
<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);
.背景滑块开始{
背景:url('my-image.png')repeat-x0;
}
.背景滑块端{
背景:url('my-image.png')repeat-x-5000px 0;
}
$('.background slider start).addClass('background-slider-end',30000);
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);