Ползунок jQuery - кроссбраузер setTimeout? - PullRequest
Новая
       0

Ползунок jQuery - кроссбраузер setTimeout?

0 голосов
/ 31 декабря 2011

Хорошо, я попытался создать еще один слайдер с предварительно загруженными изображениями (как бы вы это ни называли), используя только две кнопки со стрелками. Получил анимацию так, как я хотел, и идея управления была из учебника.

(Учебное пособие: Как сделать автоматическое продвижение слайд-шоу )

Итак, я адаптировал решение для автоматического продвижения под свои нужды и все заработало нормально. Но когда я попытался запустить его в FF (8.0), у меня возникла небольшая проблема. После нажатия кнопки он делает все как следует, кроме той части, где анимация продолжается через заданные 3 секунды, в то время как IE (8.0) не имеет проблем (не тестировался в других браузерах).

Что я делаю не так?

Вот необходимый код:

Часть HTML: 

<div id=imgholder1>
    <div id="imgholder2"></div>
</div>
<div id="bwd" class="button"><</div>
<div id="fwd" class="button">></div>

JQuery / JavaScript: 

var traker=0;
$(document).ready(function(){
    var numOfImages=4;
    var timeOut = null;

    (function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
    })();

    function preload(imgIndex,numImages){
        $("#imgholder1").css('background-image','url("'+imgIndex+'.jpg")');
        $("#imgholder2").hide(0);
        imgIndex < numImages ? imgIndex++ : imgIndex=1
        $("#imgholder2").css('background-image','url("'+imgIndex+'.jpg")');
        traker=imgIndex;
    }
    preload(1,numOfImages);

    function animate(imgIndex,numImages){
        $("#imgholder2").fadeIn("slow",function(){
            preload(imgIndex,numImages);
        });
    }

    $("#fwd").bind("click",function(e,simulated){
        animate(traker,numOfImages);
        if(!simulated){
            clearTimeout(timeOut);
            timeOut = setTimeout(autoAdvance,3000);
        }
    });

    $("#bwd").bind("click",function(){
        var temp=traker-2;
        if(temp == 0){temp=numOfImages;}
        if(temp == -1){temp=numOfImages-1;}
        $("#imgholder2").css('background-image','url("'+temp+'.jpg")');
        animate(temp,numOfImages);
        clearTimeout(timeOut);
        timeOut = setTimeout(autoAdvance,3000);
    });
});

Ответы [ 2 ]

0 голосов
/ 01 января 2012

Исправление!

Это: 

(function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);
})();

должно выглядеть так: 

function autoAdvance(){
    $('#fwd').trigger('click',[true]);
    timeOut = setTimeout(autoAdvance,3000);     
}
autoAdvance();

FF не распознает функцию автоматического вызова функции autoAdvance.

0 голосов
/ 31 декабря 2011

На первый взгляд, похоже, что ваша переменная timeout находится в неверной области видимости - объявите ее вне всего, чтобы она была разделена между функциями: 

var traker=0;
var timeOut;

Лично я также избегаю использования зарезервированных ключевых слов метода, которые близки к этому, поэтому используйте: 

var tmr;

Кроме того, вы должны использовать window.setTimeout, а не просто setTimeout

...