Question

我正在为使用jQuery的innerFade插件创建一个广告横幅，并使用一些基本的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);

Answer 1

我认为这里的问题是Javascript is not multi-threaded。您试图通过逐位移动图像来模拟多线程，但除非您编写自己的fade实现，否则最终结果永远不会完全同步。

您也可以将while (secs < 6) { .. break; }替换为if (secs < 6)。

setInterval脚本与innerFade不同步

1 个答案: