javascript - 如何停止背景图像上的动画

Question

我的网站背景图片上有动画，特别是图片一直在向左移动，但是当图片结束时它又开始了。我的问题是，当图像走到尽头(左侧)时，边缘是可见的，我希望当它到达左侧时向右移动，当它到达右侧时......再次在左侧。

var x=0;
var y=0;

var banner = $("#loading");
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');

window.setInterval(function(){
banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px');
x--;
}, 90);

Answer 1

这是一个示例动画:

var x = 0;

var fps = 30;
var speed = 2;

var bannerWidth = 400;
var imageSize = 128;

setInterval(function() {
    x += speed;
    
    if (x >= bannerWidth-imageSize || x <= 0) {
    	speed *= -1;
    }
    
    $("#banner").css("backgroundPosition", x + "px 0");
}, 1000/fps);

#banner {
    width: 400px;
    height: 128px;
    border: 1px solid red;
    background-image: url("http://icons.iconarchive.com/icons/position-relative/social-1/128/google-icon.png");
    background-position: 0 0;
    background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner"></div>

如果您提供 HTML 和 CSS，我可以修改示例。