Простое цикличное слайд-шоу со ссылкой на следующую/предыдущую

Я более или менее новичок в Jquery, и для начала я попытался сделать кликабельное циклическое слайд-шоу на основе этого. Все идет нормально. Код работает (см. ниже). Мои вопросы:

  1. Нет ли более простого способа написать код. Я как бы повторяю один и тот же код для предыдущего и следующего.

  2. Когда я нажимаю на следующую/предыдущую ссылки и начинается анимация — и во время анимации я снова нажимаю, то иногда изображение мерцает или возникает ошибка. Есть ли способ заставить анимацию завершиться, прежде чем она отреагирует на мой щелчок.

Javascript:

    $(function() {

    $('#prev').click(function() {
        var $active = $('#slideshow IMG.active');
        var $prev = $active.prev();
        $active.addClass('last-active');

    if($active.is(":first-child")){$prev = $("IMG:last-child");}
        $prev.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            }); 

    }); 


    $('#next').click(function() {
        var $active = $('#slideshow IMG.active');
        var $next = $active.next();
        $active.addClass('last-active');

    if($active.is(":last-child")){$next = $("IMG:first-child");}
        $next.css({opacity: 0.0})
            .addClass('active')
            .animate({opacity: 1.0}, 1000, function() {
                $active.removeClass('active last-active');
            }); 

    }); 

    });

CSS:

    #slideshow {position:relative; height:350px; opacity:1.0;}
    #slideshow IMG {position:absolute; top:0; left:0; z-index:8; opacity:0.0;}
    #slideshow IMG.active {z-index:10; opacity:1.0;}
    #slideshow IMG.last-active {z-index:9;}
    #next {color:#0000ff; cursor:pointer;}
    #prev {color:#0000ff; cursor:pointer;}

HTML:

    <div id="slideshow">
        <img src="image1.jpg" class="active" />
        <img src="image2.jpg" />
        <img src="image3.jpg" />
        <img src="image4.jpg" />
    </div>
    <div id="next">NEXT</div>
    <div id="prev">PREV</div>

jquery slideshow cycle jquery-animate
person Michael    schedule 21.04.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

http://jsfiddle.net/kPD4n/

Ну вот.

1) Добавьте тот же класс для кнопок «ДАЛЕЕ» и «ПРЕД» и проверьте, какая из них нажата.
2) Добавлен .stop(0,1) для перехода к концу анимации.

Все равно немного глючит...

person XCS    schedule 21.04.2012
comment
Очень круто, Спасибо! — Я думаю, что console.log нужен только для проверки, верно? – Я не совсем понимаю, что означает (0,1) в stop(), хотя я читал api.jquery.com/stop - person Michael; 23.04.2012
comment
Первый 0 означает, что очередь анимации не очищается, поэтому, если вы запустите анимацию 10 раз, анимация будет выполняться 10 раз (полная длина). Таким образом, если вы быстро нажмете кнопку «Далее» 10 раз, вам придется дождаться окончания всех анимаций. Вторая «1» - остановить текущую анимацию, которую вы воспроизводите (фактически завершить текущую анимацию). Таким образом, если вы нажмете кнопку «Далее» 10 раз, первые 9 раз анимация будет выполнена мгновенно, и будет показана только последняя анимация. .stop(0,1) — это обычный способ решить эту проблему с повторяющейся анимацией. - person XCS; 23.04.2012
comment
Обратите внимание, что с помощью stop(0,1) даже если очередь не очищена, анимация не добавляется в очередь, потому что когда вы нажимаете кнопку триггера во время воспроизведения анимации, она завершает эту анимацию и просто выполняет эту. - person XCS; 23.04.2012

arrow_upward
1
arrow_downward

Что ж, каждый раз, когда я сталкиваюсь с необходимостью создания какого-либо цикла, я использую jQuery Cycle PlugIn. Возможно, это не ответ на ваш вопрос об оптимизации, но я думаю, что всем следует взглянуть на плагин Cycle.

И, как вы можете видеть здесь, на демонстрационной странице, вы можете использовать кнопки "следующая/предыдущая". тоже очень легко. Как

$('#slideshow').cycle({ 
    fx:     'fade', 
    speed:  'fast', 
    timeout: 0, 
    next:   '#next', 
    prev:   '#prev' 
});

И ваш HTML-код может оставаться таким.

person thomas    schedule 21.04.2012
comment
Благодарю вас! Я знаю плагин цикла. Но чтобы узнать о Jquery, я хотел создать его сам. И мне просто не удалось отцентрировать плагин cylce по вертикали И по горизонтали. Должно быть что-то в коде плагина, что усложняет... - person Michael; 23.04.2012