jQuery backstretch image auto-moving and back

Question

Io uso backstretch sul mio sito web. Ora provando a spostare il backgroudn automaticamente da sinistra a destra e viceversa. Ma fino ad ora, si muove solo in una direzione. Sto cercando un ciclo continuo di quell'immagine in movimento.

Come posso ripristinare/spostare indietro l'immagine ??

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

un po 'di javascript per lo spostamento ad effetto & inizializzazione

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

conseguente questo output 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> 

dispiace per la pubblicazione il codice html di un Littlt un po 'brutto, non so farlo bene ...

EDIT:

Grazie tante, ma penso che non è quello che mi serve.

Penso di aver bisogno di un calcolo sulla larghezza dell'immagine e sul margine sinistro per passare da spostamento a sinistra a spostamento a destra e viceversa.

Così ho provato a calcolare la larghezza della mia immagine, ma

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

è sempre nullo.

E

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

rompe l'intera javascript.

Ho pensato che potesse essere una soluzione scrivere una seconda funzione chiamata backswoop per contare il margine sinistro. E poi fare una condizione su margin-left e image-width.

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

Ma, perché io non sono grande con javascript, non funziona :-(

Answer 1

Prima di spostare l'elemento, utilizzare jQuery .data() per memorizzare il margine originale. In questo modo quando si desidera resettare è possibile animare il margine a tale valore.

Questo codice non è perfetto. E 'solo per dare un'idea di cosa si può fare.

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