具有自適應設計的jQuery滑塊

Question

我希望我的網站具有響應能力，所以我更改了我的圖像，即3個不同大小的精靈圖像。

現在我有這樣的代碼和它的作品，如果我的所有圖像有600px的寬度，但現在我想

left: '-=600px'改變，因此採取slideWidth。但我該怎麼做？

$(function() { 
    var slides = $('.slide'); 
    var numberSlides = slides.length; 
    var slideWidth = $('.slide').width(); 
    var wrap = $('#slideWrap') 

    wrap.width(numberSlides * slideWidth); 

    function moveMent() { 
     for(r=0; r<100; r++) { 
      for(i=0; i<numberSlides-1; i++) { 
       wrap 
        .delay(3000) 
        .fadeTo(500, 0) 
        .animate({ 
        /*THIS NEEDS TO BE CHANGED:*/    
         left : '-=600px' 
        }) 
        .fadeTo(500, 1) 
      } 
      wrap.delay(3000).fadeTo(500, 0).animate({left : '0'}).fadeTo(500, 1); 
     } 
    }; 

    moveMent(); 

}); 

Answer 1

的left動畫屬性正好被設置爲-slideWidth：

$(function() { 
var slides = $('.slide'); 
var numberSlides = slides.length; 
var slideWidth = $('.slide').width(); 
var wrap = $('#slideWrap') 

wrap.width(numberSlides * slideWidth); 

function moveMent() { 
    for(r=0; r<100; r++) { 
     for(i=0; i<numberSlides-1; i++) { 
      wrap 
       .delay(3000) 
       .fadeTo(500, 0) 
       .animate({ 
       /*THIS NEEDS TO BE CHANGED:*/    
        left : '-=600px' 
       }) 
       .fadeTo(500, 1) 
     } 
     wrap.delay(3000).fadeTo(500, 0).animate({left : '0'}).fadeTo(500, 1); 
    } 
}; 

moveMent(); 

}); 

這裏有一個proof of concept。