Как автопрокрутить по горизонтали с помощью jquery

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

Uhm Я не уверен, что вы можете использовать «{scrollLeft: item_width}» для элемента, отличного от тела o окно ... но если вы можете сделать это изменить часть вашего сценария:

{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/

Answer 2

Необходимо отслеживать текущий индекс. Вы сдвинулись вправо один раз (ширина элемента_шины), но во второй раз вам нужно оживить scrollLeft: item_width * 2, третий item_width * 3 и т. Д.

установить переменную в вашем документе, которая начинается с 0, и его увеличение или уменьшение при нажатии на правый или налево, а затем изменение 0 и item_width на item_width * index