0

我最终的目标是在类似于 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%'
        });
    });    
});

首先，我不知道是否可以将.contentContainerdiv 彼此相邻堆叠，而不必在.containerdiv 上设置 300% 的宽度。由于该站点将成为 CMS，因此我不想不断更改.containerdiv 的宽度以适应。一次也只能看到一个.contentContainerdiv，因此我将溢出设置为隐藏。
我似乎也想不出一个很好的滚动功能，我目前只将.containerdiv 滚动一次 100%，理想情况下，我希望它更像幻灯片，即如果可能的话，在循环上工作。任何建议将不胜感激！

4

1 回答 1

2

我已经更新了你的JSFiddle。使用下面的代码，您可以计算滑块中有多少元素，然后自动设置 % 宽度。

var length = $('div .container').children('div .contentContainer').length;
$(".container").width(length*100 +'%');
于 2013-09-29T23:43:02.853 回答