Могу ли я сделать это с помощью цикла ()? - PullRequest
1 голос
/ 01 сентября 2011

У меня этот код:

HTML

<div class='myDiv'>1</div>
<div class='myDiv'>2</div>
<div class='myDiv'>3</div>
<div class='myDiv' style='display:none'>4</div>
<div class='myDiv' style='display:none'>5</div>

CSS

.myDiv
{
    width:50px;
    height:50px;
    line-height:50px;
    border:2px solid #000000;
    float:left;
    text-align:center;
    margin-right:10px;
}

JQuery

$('#myButton').click(function () {

});

и я бы хотел, когда я нажму MOVE, сдвинуть влево divs myDiv.

Итак, если начало - 1 2 3, то при нажатии MOVE оно должно стать 2 3 4, чем 3 4 5 и сын на.

Я бы хотел сделать это с помощью .cycle() плагинов, но я не знаю, смогу ли я установить scroll-window с ним.

Возможно ли это? Или мне нужно реализовать свои собственные функции jQuery / JS? (с fade/slide effect, будет тяжелая работа).

Ответы [ 2 ]

2 голосов
/ 01 сентября 2011

Вы можете использовать Карусель Lite с прокруткой , установленным в 1 видимым , установленным в 3

http://www.gmarwaha.com/jquery/jcarousellite/#doc

1 голос
/ 01 сентября 2011

РАБОЧИЙ ДЕМО

$(document).ready(function() {
    var galW = $('#gallery').width(),
        my = $('.mydivs').length, // 3
        mD = $('.myDiv').length,  // 6
        c = 1;

    $('#slider').width(galW * my);

    function a() {
        $('#slider').animate({left: '-='+(galW/3)}, 800);
    }

    $('.btn').click(function() {
        c++;
        if(c===(mD-1)){
            $('#slider').animate({left:0}, 800);
            c=1; return;
        }
        a();
    });
});


Или, если хотите, с помощью кнопок PREV и NEXT:

РАБОЧИЙ ДЕМО 2

(Вы можете найти базовый учебник ЗДЕСЬ )

Удачного кодирования!

...