Добавить анимацию прокрутки в список в jQuery

0

У меня есть список, где, если вы нажмете prev, он будет левым и правым, как показано на этой скрипке

HTML

    <div>
    <span id="prev">prev</span>
        <ul id="scrolllist">
            <li><img src="http://dummyimage.com/100x100/000000/fff"></li>
            <li><img src="http://dummyimage.com/100x100/f33636/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c5b9e/fff"></li>
            <li><img src="http://dummyimage.com/100x100/0c9e0c/fff"></li>
        </ul>
    <span id="next">next</span>
    </div>

CSS

    div {
        float: left;
        width: 550px;
    }
    li {
        float: left;
        list-style-type: none;
        margin: 0 5px;
    }
    #prev {
        cursor: pointer;
        float: left;
    }
    #next {
        cursor: pointer;
        float: right;
    }

JS

    $(function () {
        $('#prev').click(function () {
            var first = $('#scrolllist li:first-child');
            $('#scrolllist li').parent().append(first).animate({ "left": "-=50px" }, "slow" );
        });
        $('#next').click(function () {
            var last = $('#scrolllist li:last');
            $('#scrolllist li').parent().prepend(last).animate({ "left": "+=50px" }, "slow" );
        });
    });

Это работает, перемещает их, как ожидалось, однако я хочу прокручивать элементы списка, чтобы получить влияние на них, которые идут в нажатом направлении, подобно тому, что можно увидеть в http://coolcarousels.frebsite.nl/c/58/

Что мне нужно сделать, чтобы это работало?

  • 0
    Ваше перемещение путем добавления. Нет анимации, потому что ничего не движется. Ваше добавление или добавление.
  • 0
    Извините, что вам придется вернуться к чертежной доске ... Вы также не можете перемещать объекты, если у них нет позиции.
Показать ещё 1 комментарий
Теги:
scroll
jquery-animate

1 ответ

2
Лучший ответ

Хитрость в том, чтобы сделать это правильно - поместить изображения в скрытый контейнер div, а затем оживить этот контейнер слева или справа по мере необходимости, клонируя первый или последний img в списке, а затем добавляя или добавляя в зависимости от направления.

Контейнер div img должен быть помещен в другой div с явной высотой и шириной с переполнением, установленным в скрытое. Это предотвращает видимость широкого контейнера img для пользователя.

Вот HTML:

<div>
<span id="prev">prev</span>
<div class="scroll-container">
    <div class="img-container">
        <img src="http://dummyimage.com/100x100/000000/fff">
        <img src="http://dummyimage.com/100x100/f33636/fff">
        <img src="http://dummyimage.com/100x100/0c5b9e/fff">
        <img src="http://dummyimage.com/100x100/0c9e0c/fff">
    </div>
</div>
<span id="next">next</span>

И JavaScript:

$(function () {
$('#prev').click(function () {
    if(!$('.img-container').is(':animated')) {
        var first = $('.img-container img:first-child');
        var firstClone = first.clone();
        $('.img-container').append(firstClone);
        $('.img-container').animate({ "left": "-=110px" }, "slow", function() {
            first.remove();
            $('.img-container').css("left", "0");
        });
    }
});
$('#next').click(function () {
    if(!$('.img-container').is(':animated')) {
        var last = $('.img-container img:last-child');
        var lastClone = last.clone();
        $('.img-container').css("left", "-110px");
        $('.img-container').prepend(lastClone);
        $('.img-container').animate({ "left": "0" }, "slow", function() {
            last.remove();
        });
    }
});
});

Обратите внимание на "if not animated" check в начале каждой функции. Это предотвращает запуск пользователем функций до завершения анимации (что может вызвать странные ошибки).

Вот модифицированная версия вашей скрипки: http://jsfiddle.net/fJqKV/17/

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню