jQuery Backstretch Bild automatisches Verschieben und zurück

Question

Ich benutze Backstretch auf meiner Website. Versuchen Sie nun, den Hintergrund automatisch von links nach rechts und zurück zu bewegen. Aber bis jetzt bewegt es sich nur in eine Richtung. Ich suche nach einer kontinuierlichen Schleife dieses bewegten Bildes.

Wie kann ich das Bild zurücksetzen/verschieben?

backstretch.js: http://dev.disaster-kfw.com/fileadmin/template/js/slidebackground.js

einige weitere Javascript für moving-Effekt & Initialisierung

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')); 
     }); 

resultierende diese HTML-Ausgabe

<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> 

leid für die Buchung den HTML-Code ein Littlt Bit hässlich, weiß nicht, es richtig zu tun ...

EDIT:

Vielen Dank, aber ich denke, das ist nicht das, was ich brauche.

Ich denke, ich brauche eine Berechnung über Bildbreite und Rand-links, um von Bewegung-links nach Bewegung-rechts und zurück zu wechseln. So

Ich versuchte Breite meines Bildes zu berechnen, aber

iWidth = jQuery("#backstretch img").width(); 

ist immer NULL.

Und

iWidth = $("#backstretch img").width(); 

bricht das ganze Javascript.

Ich dachte, es könnte eine Lösung sein, um eine zweite Funktion namens Backswoop zum Hochzählen der Marge-links zu schreiben. Und dann eine Bedingung über Rand-links und Bild-Breite.

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')); 
}); 

Aber, weil ich mit Javascript nicht groß bin, es funktioniert nicht :-(

Answer 1

Bevor Sie das Element zu verschieben, verwenden jQuery .data() die ursprüngliche Marge zu speichern. Auf diese Weise, wenn Sie wollen setzen Sie die Marge auf diesen Wert animieren.

Dieser Code ist nicht perfekt. Es ist nur Ihnen eine Vorstellung zu geben, was Sie tun können.

//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")}); 
}; 

https://api.jquery.com/jquery.data/