如何使用jQuery水平自动滚动

Question

I'm trying to make horizontal scrolling effect using two buttons, left and right. But I can't sort it out. I managed to scroll to next element but then scrolling stops and I can't scroll to another element.

$(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

You need to keep track of your current index. You have shifted right once (the width of item_width), but the second time you need to animate scrollLeft: item_width*2, the third item_width*3, etc.

set a variable in your document ready that starts at 0, and its incremented or decremented when you click on either right or left, and then change 0 and item_width to item_width * index

Answer 2

Uhm i'm not sure you can use "{scrollLeft: item_width}" for element different to body o window... but if you can do this change part your script:

{scrollLeft: item_width}

to

{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;
    });
 });

For example you can use this 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;
}

see the example here: http://jsfiddle.net/u3hB8/4/