Проблема с резюме карусели JQuery

Я использую JQuery Simple Carousel, и все работает нормально (автоматическое воспроизведение, исчезновение между каждым элементом списка, кнопки «предыдущий» и «следующий»)... но проблема в том, что когда я нажимаю кнопку, он останавливает автоматическое воспроизведение. Я хотел бы найти решение, в котором после щелчка карусель снова запускается в два раза дольше, чем обычно требуется для автоматического воспроизведения в этот раз. вот код

<script type="text/javascript">
    jQuery(document).ready(function() {
        // Carousel 
        $("ul.writein").simplecarousel({
            width:692,
            height:148,
            auto: 5000,
            fade: 700,
            next: $('.next'),
            prev: $('.prev')
        });
    });

</script>

javascript carousel jquery
person David    schedule 06.06.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Проблема в следующей части кода:

if(typeof click != "undefined")
config.auto = false;

Что эффективно останавливает карусель после того, как вы используете любую ее навигацию. Чтобы исправить это, вам понадобится:

Отредактировано для добавления сброса времени ожидания анимации:

Добавьте переменные, которые будут хранить тайм-аут и если тайм-аут активен:

var myTimer, timerActive = false;

сразу после var li = ul.children('li');

заменять:

if(typeof click != "undefined")
            config.auto = false;

        if(config.auto!=false)
            setTimeout(function() {
                slide('next');
            }, config.auto);

с:

if(typeof click != "undefined"){
    if(config.auto!=false){
        if (timerActive) clearTimeout(myTimer);
        myTimer = setTimeout(function() {
                slide('next');
            }, config.auto * 2);
        }
        timerActive = true;
    }
    else{
        if(config.auto!=false){
            if (timerActive) clearTimeout(myTimer);
            myTimer = setTimeout(function() {
                slide('next');
            }, config.auto);
            timerActive = true;
        }
    }

и в самом конце кода карусели заменить:

if(config.auto!=false)
        setTimeout(function() {
            slide('next');
        }, config.auto);

с:

if(config.auto!=false){
            if (timerActive) clearTimeout(myTimer);
            myTimer = setTimeout(function() {
                slide('next');
            }, config.auto);
            timerActive = true;
        }

----конец редактирования----

Обратите внимание, что на самом деле я ничего из этого не тестировал - могут быть опечатки и т. д. Если это не сработает, вы всегда можете попробовать карусель для jQuery. Я написал https://github.com/c2h5oh/jQuery.-Cycle-Uber-Lite

person c2h5oh    schedule 06.06.2012
comment
Спасибо, похоже, это начинает приносить результат, но это действует немного странно. При нажатии на предыдущий или следующий слайд появляется только на короткое время, затем быстро переходит к следующему слайду, который возвращается вовремя, затем каждый второй слайд быстрый, как первый - person David; 11.06.2012
comment
Это связано с тем, что изменение не сбрасывало уже установленный тайм-аут — его нужно было бы сохранить в переменной ( var x = setTimeout() ), чтобы можно было использовать clearTimeout(x). - person c2h5oh; 11.06.2012
comment
я новичок, и я не могу заставить clearTimeout(x) работать на меня... не могли бы вы показать мне, как будет выглядеть завершенный сценарий? - person David; 11.06.2012
comment
это был просто пример - отредактировал ответ, включив сброс тайм-аута. - person c2h5oh; 12.06.2012