jQuery：水平滾動到div

我最終在類似於bbc站點的目標中實現了什麼：http://www.bbc.co.uk帶有從部分到部分的側向滾動。這裏是我的代碼，我會解釋我所面臨的問題：
的jsfiddle：http://jsfiddle.net/neal_fletcher/kzQFQ/2/
HTML：jQuery：水平滾動到div

<div class="wrapper"> 
    <div class="container"> 
     <div class="contentContainer red"></div> 
     <div class="contentContainer blue"></div> 
     <div class="contentContainer orange"></div> 
    </div> 
</div> 

<div class="left">LEFT</div> 
<div class="right">RIGHT</div>

的jQuery：

$(document).ready(function() { 
    $('.right').click(function() { 
     $('.container').animate({ 
      'left': '-100%' 
     }); 
    }); 
    $('.left').click(function() { 
     $('.container').animate({ 
      'left': '0%' 
     }); 
    });  
});

首先，我不知道這是否是可能的將.contentContainer div彼此相鄰堆疊，而不必在.container div上設置300％的寬度。由於網站將成爲CMS，我不想繼續改變.container div的寬度以適應。一次只能看到一個.contentContainer div，因此我將溢出設置爲隱藏。
我似乎無法找出一個不錯的滾動功能，我目前只有一個滾動.container div一次100％，理想情況下，我希望這工作更像幻燈片，即在一個循環，如果可能。任何建議將不勝感激！

來源

2013-09-29 user1374796

爲什麼不使用滑塊插件？你甚至可以[自己寫]（http://jqueryfordesigners.com/jquery-infinite-carousel/）。 – Terry

我在這裏回答了類似的問題：http://stackoverflow.com/a/18966254/1937302 – BYossarian

我已更新您的JSFiddle。使用下面的代碼，您可以計算您的滑塊內有多少元素，然後自動設置％寬度。

var length = $('div .container').children('div .contentContainer').length; 
$(".container").width(length*100 +'%');

來源

2013-09-29 23:43:02 Thanos

jQuery：水平滾動到div

回答

相關問題