Как сделать слайд-шоу в jQuery с элементами управления неразрывными? - PullRequest
Новая
       17

Как сделать слайд-шоу в jQuery с элементами управления неразрывными?

1 голос
/ 15 октября 2010

Я создаю простое слайд-шоу с использованием jQuery. У меня есть основы, но, как относительный новичок в jQuery, я чувствую, что борюсь с очередью анимации и не добиваюсь большого прогресса.

Я создал слайд-шоу, создав функцию, которая получает числовой индекс первого показанного слайда. Он исчезает на слайде, делает паузу, затемняет слайд, затем вызывает себя, передавая числовой индекс следующего слайда. Это прекрасно работает.

Проблема возникает, когда я пытаюсь разрешить взаимодействие с пользователем. Я создал кнопку, которая позволит пользователю запускать слайд-шоу на определенном слайде. Эта кнопка очищает очередь, затем затухает текущий слайд, затем запускает функцию слайд-шоу, передавая индекс определенного слайда для начала. Это тоже хорошо работает. Проблемы начинаются, когда кнопка нажимается быстро несколько раз. Странные вещи начинают происходить, например, предполагаемый слайд исчезнет, ​​но только на полпути, или слайд, следующий за ним, исчезнет несколько раз подряд.

Я пытался добавить «stop ()» и «clearQueue ()» в полуслучайных местах, но пока мне не очень повезло. Для тех, кто твердо понимает, как работает очередь анимации, это (надеюсь) простое исправление - к сожалению, кто-то еще не я.

Вот сердце кода. Чтобы увидеть живую, упрощенную версию проблемы, см .: http://martinsmucker.com/demo/slideshow.html

HTML: 

<div id="slideshow_container">
    <div class="slide" id="slide1"></div>
    <div class="slide" id="slide2"></div>
    <div class="slide" id="slide3"></div>
    <div class="slide" id="slide4"></div>
</div>
<button>Purple</button>

JQuery: 

runSlideShow(1);

$('button').click(function(){
    $('.slide:visible').clearQueue().fadeOut(500, function(){
        runSlideShow(3);
    });
});

function runSlideShow (slideNumber)
{
    $('#slide' + slideNumber).fadeIn(500).delay(3000).fadeOut(500, function() {
        // if we're on the last slide (number 4), start over at number 1
        if (slideNumber == 4) {
            runSlideShow(1);
        }
        // otherwise, just move to the next slide
        else {
            slideNumber++;
            runSlideShow(slideNumber);
        }
    });
}

Любая помощь очень ценится, спасибо!

Ответы [ 3 ]

3 голосов
/ 15 октября 2010

Вместо использования .clearQueue() используйте .stop(true,true) ( ref )

Вот обновленная демоверсия .

1 голос
/ 15 октября 2010

Отключить кнопку, пока анимация не будет завершена, а затем снова включить?

Если это будет более крупный проект, то может быть целесообразно использовать хороший плагин для скроллера (хотя это здорово сделать

* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *;} * * *. * * * * * * * * * * * * *}}} * * *.}}или посмотрите нижний правый раздел истории с помощью стрелок.

Код верхней скроллера 

$('.section_2').scrollable({circular: true, mousewheel: true, speed: 1000}).autoscroll({
    interval: 5000      
});
var api = $(".section_2").data("scrollable");
// do something upon scroll
api.onSeek(function() {
    //console.info("current position is: " + this.getIndex())
});

Код нижней скроллера 

$('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
var api_timeline = $(".timeline-container").data("scrollable");
//console.info(api_timeline.getSize());
var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
//console.info(timeline_random_index);
api_timeline.seekTo( timeline_random_index, 0 );
1 голос
/ 15 октября 2010

Один способ, которым я занимался в прошлом, - это использование переменной отслеживания, чтобы указать, когда выполняется анимация (например, isAnimating). В прослушивателе кликов я сначала проверяю, является ли isAnimating = true. Если так, пропустите это. В противном случае установите isAnimating = true и выполните анимацию. Внутри обратного вызова для анимации я сбрасываю isAnimating обратно на false.

...