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

Question

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

0

Я пытаюсь сделать эффект горизонтальной прокрутки, используя две кнопки: влево и вправо. Но я не могу разобраться. Мне удалось перейти к следующему элементу, но затем прокрутка останавливается, и я не могу перейти к другому элементу.

$(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;
    });
});

Alen 04 дек. 2013, в 10:51

Источник

1

можешь дать ссылку на скрипку?
Sarath 04 дек. 2013, в 09:43

Теги:

javascript

jquery

2 ответа

1

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

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

Patrick 04 дек. 2013, в 08:22

0

вставьте это в код, и вы получите свой ответ, это удивительно, что вы почти на 1 тыс. повторений! : D
pythonian29033 04 дек. 2013, в 10:22

Ещё вопросы

вставьте это в код, и вы получите свой ответ, это удивительно, что вы почти на 1 тыс. повторений! : D

Frogmouth · Accepted Answer · 2013-12-04T08-40-00.000Z

Uhm, я не уверен, что вы можете использовать "{scrollLeft: item_width}" для элемента, отличного от окна body 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/