我如何讓DIV的寬度，然後使用jQuery

Question

動畫我有選擇客戶區滑梯的問題請查看以下鏈接

Demo

現在這裏是10個IMGS，但它只是幻燈片，並顯示6幅圖像，

我想thumbnailscroller寬度滾動，直到圖像完成。

<div class="inner_right_main_tow thumbnailscroller">Content here</div> 

這裏是jQuery代碼，

$(".carousel-next").click(function(){ 
    $(this).parents(".thumbnailscroller").find("ul").animate({left: '-710px'}); 
}); 

$(".carousel-previous").click(function(){ 
    $(this).parents(".thumbnailscroller").find("ul").animate({left: '0'}); 
}); 

Answer 1

這是因爲你給它一個固定的位置，滾動到-710px

你需要讓這個充滿活力與-=710px。這意味着每次點擊它將向左移動710個像素。

$(".carousel-next").click(function(){ 
    $(this).parents(".thumbnailscroller").find("ul").animate({left: '-=710px'}); 
}); 

但現在你需要處理的時候停止..

---

更新處理停止（變得更加複雜）

我會改變CSS製作它更容易..

CSS修復程序

• 從.carousel規則中刪除9999px。

• 對於.thumbnailscroller .carousel ul添加

  white-space:nowrap; 
  display:inline-block; 
  

• ，爲.inner_right_main_tow li刪除float:left，並添加

  display:inline-block; 
  

jQuery的

$(window).load(function(){ 
    var ul = $('.thumbnailscroller').find('ul'), 
     step = ul.closest('.thumbnailscroller').width(), 
     maxLoc = step - ul.width(); 

    $(".carousel-next").click(function(){ 
     var animated = ul.is(':animated'), 
      currentLoc = parseInt(ul.css('left'),10), 
      nextPos = Math.max(maxLoc, currentLoc -step); 

     if (!animated){ 
      ul.animate({left: nextPos}); 
     } 
    }); 
    $(".carousel-previous").click(function(){ 
     var animated = ul.is(':animated'), 
      currentLoc = parseInt(ul.css('left'),10), 
      nextPos = Math.min(0, currentLoc +step); 

     if (!animated){ 
      ul.animate({left: nextPos}); 
     } 
    }); 
});