Javascript jQuery backstretch图像自动移动和返回

我在我的网站上使用backstretch。现在尝试将背景从左到右再向后自动移动。但直到现在，它只是朝一个方向移动。我在寻找运动图像的连续循环

如何重置/移回图像？？

backstretch.js：

更多用于移动效果和初始化的javascript

var images = ['fileadmin/template/gfx/background02-03.jpg'];
        jQuery.backstretch( images[Math.floor(Math.random() * images.length)] );
        jQuery(function($){
            (function swoop(element) {
                element
                    .animate({'margin-left':'-=5px'}, 100, function(){
                        setTimeout(function(){
                            swoop(element);
                        }, 0);
                    });
            })($('#backstretch img'));
        });

生成此HTML输出

<div id="backstretch" style="left: 0px; top: 0px; position: fixed; overflow: hidden; z-index: -999999; margin: 0px; padding: 0px; height: 100%; width: 100%;"><img src="fileadmin/template/gfx/background02-03.jpg" style="position: absolute; margin: 0px 0px 0px -3404.98890491151px; padding: 0px; border: none; z-index: -999999; width: 3006px; height: 835px; left: -551.5px; top: 0px;"></div>

始终为空

及

破坏了整个javascript

我认为写第二个函数backswoop来计算左边的边距可能是一个解决方案。然后做一个关于左边距和图像宽度的条件

iWidth = jQuery('#backstretch img').width();
jQuery(function($){
  (function swoop(element) {
    element.animate({'margin-left':'-=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left')*-1 <= iWidth){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
  (function backswoop(element) {
    element.animate({'margin-left':'+=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left') >= 0){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
});

iWidth=jQuery（'#backstretch img'）.width（）；
jQuery（函数（$）{
（功能swoop（要素）{
元素。动画（{'margin-left'：'-=5px'}，50，function（）{
setTimeout（函数（）{
if（element.css（'margin-left'）*-1=0）{
俯冲（要素）；
}否则{
后低音单元；
}
}, 0);
});
})（$）；
});

---

但是，因为我不擅长javascript，它不起作用：-（

在移动元素之前，使用jQuery

.data（）

存储原始边距。这样，当您想要重置边距时，可以将边距设置为该值

这段代码并不完美。它只是让你知道你能做什么

//I would avoid global variables, but I don't know enough of your code.
swoopingElement =  $('#backstretch img');
swoopingElement.data("startingmargin", $('#backstretch img').css('marginLeft'));

(function swoop(element) {
  element
    .animate({'margin-left':'-=5px'}, 100, function(){
      swoopingElement.data("timer", setTimeout(function(){
        swoop(element);
      }, 0));
    });
})($('#backstretch img'));

function resetElement(element){
  //First shut down any remaining animation
  element.stop();
  clearTimeout(element.data("timer"));  //even though it's zero...  it might be active.
  //Send element back
  element.animate({'margin-left':element.data("startingmargin")}, 100);
  //Or for instant return.
  // element.css({'margin-left':element.data("startingmargin")});
};

---

安装一把小提琴，我们可能会帮助您。您好，格雷伦，您能描述一下吗？

iWidth = jQuery('#backstretch img').width();
jQuery(function($){
  (function swoop(element) {
    element.animate({'margin-left':'-=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left')*-1 <= iWidth){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
  (function backswoop(element) {
    element.animate({'margin-left':'+=5px'}, 50, function(){
        setTimeout(function(){
           if(element.css('margin-left') >= 0){
             swoop(element);
           }else{
             backswoop(element);
           }
        }, 0);
    });
  })($('#backstretch img'));
});

//I would avoid global variables, but I don't know enough of your code.
swoopingElement =  $('#backstretch img');
swoopingElement.data("startingmargin", $('#backstretch img').css('marginLeft'));

(function swoop(element) {
  element
    .animate({'margin-left':'-=5px'}, 100, function(){
      swoopingElement.data("timer", setTimeout(function(){
        swoop(element);
      }, 0));
    });
})($('#backstretch img'));

function resetElement(element){
  //First shut down any remaining animation
  element.stop();
  clearTimeout(element.data("timer"));  //even though it's zero...  it might be active.
  //Send element back
  element.animate({'margin-left':element.data("startingmargin")}, 100);
  //Or for instant return.
  // element.css({'margin-left':element.data("startingmargin")});
};