Question

我的目标是最终实现与bbc网站类似的东西：http://www.bbc.co.uk，其中有一个侧面滚动从一个部分到另一个部分。这是我的代码，我将解释我面临的问题：
jsFiddle：http://jsfiddle.net/neal_fletcher/kzQFQ/2/
HTML：

<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％，理想情况下我希望它更像幻灯片，即在循环上，如果可能的话。任何建议将不胜感激！

Answer 1

我已更新 JSFiddle 。使用下面的代码，您可以计算滑块内部的元素数量，然后自动设置％宽度。

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

jQuery：水平滚动到div

1 个答案: