Question

我正在尝试使用左右两个按钮进行水平滚动效果。但我无法理清。我设法滚动到下一个元素，但滚动停止，我无法滚动到另一个元素。

$(document).ready(function(){
    $("#left").click(function(){
        $(".wrap").animate({scrollLeft: 0}, 1000);
        return false;
    });
    var item_width = $('.label').outerWidth(); 
    $("#right").click(function(){

        $(".wrap").animate({scrollLeft: item_width}, 1000);
        return false;
    });
});

Answer 1

您需要跟踪当前的索引。您已向右移动一次（item_width的宽度），但第二次需要为scrollLeft设置动画：item_width * 2，第三个item_width * 3等等。

在文档中设置一个从0开始的变量，当你向右或向左单击时，它会递增或递减，然后将0和item_width更改为item_width * index

Answer 2

嗯，我不确定你可以使用“{scrollLeft：item_width}”作为与body o window不同的元素......但如果你能做到这一点，你可以改变你的脚本：

{scrollLeft: item_width}

到

{scrollLeft: "+="+item_width}

JS：

$(document).ready(function(){
    var item_width = $('.label').css("width"); 
    $("#left").on("click",function(){
        if(parseInt($(".wrap").css("margin-left")) == 0) return;
        $(".wrap").animate({marginLeft: "+="+item_width}, 1000);
        return false;
    });
    $("#right").on("click",function(){
         $(".wrap").animate({marginLeft: "-="+item_width}, 1000);
         return false;
    });
 });

例如，你可以使用它 HTML：

<div id="right">></div>
<div id="left"><</div>
    <div class="wrap">
    <div class="label"></div>
    <div class="label"></div>
    <div class="label"></div>
</div>

的CSS：

body{
 margin:0;
 padding:0;
}
.wrap{
 overflow:hidden;
 float:left;
 width:903px;
 height:200px;
 position:relative;
}
.label{
 display:block;
 float:left;
 width:300px;
 background-color:red;
 border-left:solid 1px black;
 position:relative;
 height:200px;
}
#right,#left{
 position:absolute;
 background-color:purple;
 color:white;
 top:100px;
 width:20px;
 height:20px;
 margin-top:-10px;
 text-align:center;
 line-height:20px;
 display:block;
 z-index:2;
 cursor:pointer
}
#right{
 right:0;
}

请参阅此处的示例： http://jsfiddle.net/u3hB8/4/

如何使用jquery水平自动滚动

2 个答案: