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

回答

相关问题