多次滚动容器 div

Question

我有一个页面，我想滚动容器内的数据，如下所示：http://jsfiddle.net/pXy2C/。

我创建了相邻的文本列，我可以使用多个 div 滚动它们。 现在......在每个 div 中，我想创建一个按钮，将容器滚动到下一个 div 或前一个 div。上面 jsfiddle 示例的问题，它只翻转了第一个和最后一个 200px。有没有办法让我做我需要做的事情？

我的尝试在这里http://jsfiddle.net/3xgSX/，但我也会将其粘贴到下面。

感谢您的帮助。

CSS：

#container{
width:1000px;
height:500px;
overflow:hidden;
Position:relative;border:1px #000 solid;
}

#contents{
width:1000px;
height:200px;
position:absolute;
top:0;
left:0;
}

HTML:

<!--Column 1--> 
<div style='float:left; width:150px'>
Put your content here...
<button id="left">Left</button>
<button id="right">right</button>
</div><!--end div colomn 1-->


 <!--Column 2-->    
 <div style='float:left; width:150px; margin-left:300px'>
Put another content here...
<br>
<button id="left">Left</button>
<button id="right">right</button>

</div><!--End div column2-->



 </div><!--End div "contents"-->

Javascript：

<script type="text/javascript">
   $(document).ready(function(){
$("#right").click(function(){
    $("#contents").animate({left:'-200px'},500);
    $("#container").animate({'margin-left':'200px'},500);
});
$("#left").click(function(){
    $("#contents").animate({left:'0px'},500);
     $("#container").animate({'margin-left':'0px'},500);
});
});
</script>

Answer 1

好的，请耐心等待，这里有很多问题需要解决，所以我将详细介绍一下。

CSS

要获得与问题中提到的模型小提琴相同的效果，#containers 的宽度必须等于您的列。然后#contents 的宽度必须等于#containers 的宽度乘以列数（在本示例中为三）。 .col 将替换您原始代码中的内联 CSS。

#contents {
    width: 600px;
    height: 200px;
    position: absolute;
}
#container {
    height: 500px;
    overflow: hidden;
    position: relative;
    border: 1px #000 solid;
}
#container, .col {
    width: 200px;
}
.col {
    float: left;
}

HTML

任何给定的id 只能使用一次，因此我将button 元素上的#right 和#left 更改为.right 和.left。我还添加了第三列，因为您的问题是专门询问如何将这种通用技术应用于两个以上的列。

<div id="container">
    <div id="contents">

<!--Column 1--> 
<div class="col">
    <p>Put your content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--end div colomn 1-->


<!--Column 2--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column2-->


<!--Column 3--> 
<div class="col">
    <p>Put another content here...</p>
    <button class="left">Left</button>
    <button class="right">right</button>
</div><!--End div column3-->



    </div><!--End div "contents"-->
</div><!--End div container-->

JavaScript

要让.animate() jQuery 方法以您想要的方式工作，您必须使用相对属性值（有关更多信息，请参阅.animate() API page）。为了防止#container 从列中滑出，我创建了一个简单的函数getOffset()，并检查了#contents 的边界。

您还应该将尽可能少的值硬编码到 JS 中，而是从 DOM 中读取它们，就像我在这里使用 colwidth 和 contwidth 一样。

var colwidth = $('#container').width(),
    contwidth = $('#contents').width(),
    getOffset = function() {
        return parseInt($('#container').css('margin-left'));
    };

$(".left").click(function(){
    if (getOffset() === 0) return false;

    $("#contents").animate({left: '+=' + colwidth},500);
    $("#container").animate({'margin-left': '-=' + colwidth},500);
});
$(".right").click(function(){
    if (getOffset() === contwidth - colwidth) return false;

    $("#contents").animate({left: '-=' + colwidth},500);
    $("#container").animate({'margin-left': '+=' + colwidth},500);
});

如果您继续努力，可能会有更优雅的解决方案，但这应该会让您朝着正确的方向前进。