Javascript 如何从左到右和从右到左设置背景图像的动画

我希望使用jquery/javascript实现以下动画。我有一张宽2000px，高200px的图片。我想动画图像从左到右，直到它到达一端，然后从右到左。这将继续提供全景视图

我在互联网上尝试了[following script][1]，但它只是单向的。我想要一些像平移效果的东西。 好心的建议。多谢各位

直接链接到代码：

；（功能（）{
$.fn.autoBackgroundScroll=功能（选项）{
var opts=$.extend（{}，$.fn.autoBackgroundScroll.defaults，options）；
var$backslider=$（此项）；
var持续时间=选择持续时间；
var速度=选择速度；
var imageWidth=opts.imageWidth；
var imageHeight=opts.imageHeight；
var direction1=opts.direction1；
var direction2=opts.direction2；
var-posX=0；
var-posY=0；
滚动（持续时间、速度、方向1、方向2）；
功能滚动（持续时间、速度、方向1、方向2）{
setInterval（函数（）{
如果（方向1=='right'）{
moveRight（）；
如果（方向2==“顶部”）{
moveTop（）；
}
如果（方向2==“底部”）{
moveBottom（）；
}
}else if（方向1==‘左’）{
左移（）；
如果（方向2==“顶部”）{
moveTop（）；
}
如果（方向2==“底部”）{
moveBottom（）；
}
}else if（方向1==“底部”）{
moveBottom（）；
如果（方向2=='right'）{
moveRight（）；
}
如果（方向2==“左”）{
左移（）；
}
}else if（方向1==“顶部”）{
moveTop（）；
如果（方向2=='right'）{
moveRight（）；
}
如果（方向2==“左”）{
左移（）；
}
}
$backslider.css（'background-position'，posX+'px'+posY+'px'）；
函数moveTop（）{
if（posY=imageWidth）{
posX=0；
}
posX+=速度；
}
函数moveBottom（）{
如果（位置>=图像高度）{
posY=0；
}
posY+=速度；
}
函数moveLeft（）{
如果（posXSimple jQuery animate）为x和y设置了正确的
background position
值（我建议使用CSS转换来实现更平滑的动画）：


$（文档）.ready（函数（）{
幻灯片（）；
setInterval（函数（）{
幻灯片（）；
}, 10000);
});
函数幻灯片（）{
$（'body'）.css({
“背景位置”：-2000+$（窗口）.width（）+“px 0”
});
setTimeout（函数（）{
$（'body'）.css({
“背景位置”：“0”
});
}, 5000);
}
正文{
背景：url（'http://www.jqueryscript.net/demo/jQuery-Plugin-To-Create-Auto-Scrolling-Background-AutoBackgroundScroll-js/img/background.jpg'）不重复左上透明；
过渡：背景位置5000ms缓进缓出；
}
我建议使用CSS动画


.bg{
背景图像：url（“https://dummyimage.com/1000x200/333/ccc.png");
背景位置x:50%；
动画延迟：0s；
动画持续时间：10秒；
动画名称：全景；
动画迭代次数：无限；
动画计时功能：轻松进出；
动画填充模式：两者都有；
宽度：444px；
高度：200px；
溢出：隐藏；
保证金：0自动；
边框：1件纯金；
将更改：背景位置-x；
}
@全景关键帧{
0% {
背景位置x:0%；
}
50% {
背景位置x:100%；
}
100% {
背景位置x:0%；
}
}
向我们展示您目前拥有的代码您可以通过CSS转换来实现这一点-只需创建一个转换，将背景位置从0更改为100%@eithid
背景位置：100%0
将背景移出视图谢谢您的代码。它帮助我实现了我一直在寻找的目标。然而，一段时间后如果平移变小，imation也会停止宽度。我会将代码粘贴到这里（我使用了另一个宽度为3696px的图像。'code'$（document）.ready（函数（）{slide（）；setInterval（函数（）{slide（）；}，10000）；}）；函数slide（）{$（'body'）.css（{'background position'：-3696+$（window.width（）+'px 0'））；setTimeout（function（）{$（'body'）.css（{'background position'：'0'}）；}，5000）；}；'code'动画宽度在一段时间后会减小。是否有解决方法issue@user483903在JSI中尝试增加计时，似乎是动画（从左到右和从右到左）随着时间的推移，时间越来越短。太好了！非常感谢
;(function(){
$.fn.autoBackgroundScroll = function(options) {

    var opts = $.extend({}, $.fn.autoBackgroundScroll.defaults, options);
    var $backslider = $(this);


    var duration = opts.duration;
    var speed = opts.speed;
    var imageWidth = opts.imageWidth;
    var imageHeight = opts.imageHeight;
    var direction1 = opts.direction1;
    var direction2 = opts.direction2;


    var posX = 0;
    var posY = 0;


    scroll(duration, speed, direction1, direction2);


    function scroll(duration, speed, direction1, direction2){
        setInterval(function(){
            if(direction1 == 'right'){
                moveRight();

                if(direction2 == 'top'){
                    moveTop();
                }

                if(direction2 == 'bottom'){
                    moveBottom();
                }

            } else if(direction1 == 'left'){
                moveLeft();

                if(direction2 == 'top'){
                    moveTop();
                }

                if(direction2 == 'bottom'){
                    moveBottom();
                }

            } else if(direction1 == 'bottom'){
                moveBottom();

                if(direction2 == 'right'){
                    moveRight();
                }

                if(direction2 == 'left'){
                    moveLeft();
                }

            } else if(direction1 == 'top'){
                moveTop();

                if(direction2 == 'right'){
                    moveRight();
                }

                if(direction2 == 'left'){
                    moveLeft();
                }

            }

            $backslider.css('background-position', posX + 'px ' + posY + 'px');


            function moveTop(){
                if(posY <= -imageHeight){
                    posY = 0;
                }
                posY -= speed;
            }


            function moveRight(){
                if(posX >= imageWidth){
                    posX = 0;
                }
                posX += speed;
            }


            function moveBottom(){
                if(posY >= imageHeight){
                    posY = 0;
                }
                posY += speed;
            }


            function moveLeft(){
                if(posX <= -imageWidth){
                    posX = 0;
                }
                posX -= speed;
            }

        }, duration);
    }

}

$.fn.autoBackgroundScroll.defaults = {
    direction1: 'right',
    direction2: '',
    duration: 1,
    speed: 0.5
};

})(jQuery);