Сценарий setInterval не синхронизирован с innerFade - PullRequest
Новая
       5

Сценарий setInterval не синхронизирован с innerFade

0 голосов
/ 12 января 2011

Я создаю рекламный баннер для клиента, используя плагин innerFade для jQuery и некоторые основные Javascripting для перемещения фонового изображения в CSS. Я использую метод setInterval для фонового изображения, но он не синхронизирован с innerFade. Ниже приведен код, который я поместил в заголовке страницы. Я просто пытаюсь найти эффективный и действенный метод синхронизации двух. 

$(document).ready(function () {
    $('#slides').innerfade({
        animationtype: 'fade',
        speed: 2000,
        timeout: 5000,
        type: 'sequence',
        containerheight: '326px'
    });
});

// Code for panning of background images
var scrollSpeed = 48.58;
var step = 1;
var interval = 0;
var secs = 0;
var img1Pos = 0;
var img2Pos = 0;
var img3Pos = 0;

function scrollBg() {
    interval += step;
    secs = (interval / 20);

    while (secs < 1) {
        $(this).hide("slide", {
            direction: "down"
        }, 1000);
        img3Pos -= step;
        $('#image3').css("background-position", "0 " + img3Pos + "px");
        break;
    }
    while (secs < 6) {
        img1Pos -= step;
        $('#image1').css("background-position", "0 " + img1Pos + "px");
        break;
    }
    while (secs < 11 && secs > 5) {
        img2Pos -= step;
        $('#image2').css("background-position", img2Pos + "px 0");
        break;
    }
    while (secs < 15 && secs > 10) {
        img3Pos -= step;
        $('#image3').css("background-position", "0 " + img3Pos + "px");
        break;
    }
    if (secs == 15) {
        interval = 0;
        img1Pos = 0;
        img2Pos = 0;
    }
    if (secs == 1) {
        img3Pos = 0;
    }
}

var init = setInterval("scrollBg()", scrollSpeed);

1 Ответ

0 голосов
/ 12 января 2011

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

Также вы можете заменить while (secs < 6) { .. break; }if (secs < 6).

...