jQuery backstretch изображение авто-перемещение и назад

Question

Я использую backstretch на своем веб-сайте. Теперь вы можете автоматически перемещать backgroudn слева направо и назад. Но теперь он просто движется в одном направлении. Я ищу непрерывный цикл этого движущегося изображения.

Как сбросить/отослать изображение?

backstretch.js: http://dev.disaster-kfw.com/fileadmin/template/js/slidebackground.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> 

извините за размещение HTML код littlt бит уродливый, не знаю, чтобы сделать это правильно ...

EDIT:

Спасибо большое, но я думаю, что это не то, что мне нужно.

Мне кажется, мне нужен расчет ширины изображения и поля с левым краем, чтобы перейти от движущегося-левого к движению-направо и назад.

Так что я пытался рассчитать ширину моего изображения, но

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

всегда NULL.

И

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

ломает весь 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')); 
}); 

Но, так как я не большой с JavaScript, это не работает :-(

Answer 1

Перед тем, как переместить элемент, использовать 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")}); 
}; 

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