jQuery backstretch image tự động di chuyển và quay lại

Question

Tôi sử dụng backstretch trên trang web của mình. Bây giờ cố gắng di chuyển backgroudn tự động từ trái sang phải và ngược lại. Nhưng đến bây giờ, nó chỉ di chuyển theo một hướng. Tôi đang tìm kiếm một vòng lặp liên tục của hình ảnh chuyển động đó.

Làm cách nào để đặt lại/di chuyển trở lại hình ảnh ??

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

một số javascript hơn cho việc di chuyển hiệu ứng & khởi

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

kết quả đầu ra HTML này

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

xin lỗi vì gửi bài mã html một littlt hơi xấu xí, không biết làm đúng ...

EDIT:

Cảm ơn rất nhiều, nhưng tôi nghĩ đó không phải là những gì tôi cần.

Tôi nghĩ rằng tôi cần tính toán về chiều rộng hình ảnh và lề trái để chuyển từ di chuyển sang trái sang di chuyển sang phải và ngược lại.

Vì vậy, tôi đã cố gắng để tính chiều rộng của hình ảnh của tôi, nhưng

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

luôn là NULL.

Và

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

phá vỡ toàn bộ javascript.

Tôi nghĩ rằng nó có thể là một giải pháp để viết một hàm thứ hai được gọi là backswoop để đếm lên lề trái. Và sau đó làm một điều kiện về lề trái và chiều rộng hình ảnh.

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

Nhưng, bởi vì tôi không tuyệt vời với javascript, nó không hoạt động :-(

Answer 1

Trước khi bạn di chuyển các phần tử, sử dụng jQuery .data() để lưu trữ các biên độ ban đầu. Bằng cách đó khi bạn muốn thiết lập lại bạn có thể làm động bên lề để giá trị đó.

mã này không phải là hoàn hảo. Nó chỉ là để cung cấp cho bạn một ý tưởng về những gì bạn có thể làm.

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