Question

我创建用于每5秒列出图像的jQuery代码 - 当焦点位于图片上的按钮时，它必须停止更改。当我的页面失去焦点时我有一个问题 - 当我退回它时，由于图片的坐标不正确，一段时间后它无法正常工作！

这是我的SavasSript代码：

var displayTimeout = 5000;
var bannerCurrentImgIndex = 0;
var timer;
var link;

function bannerDoWork() {

    var bannerImages = $("#myGallery .main_pic");
    var bannerImagesCount = bannerImages.length;

    if (bannerCurrentImgIndex == bannerImagesCount - 1) {
        bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
        bannerImages.eq(0).animate({ 'left': '0' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
        bannerCurrentImgIndex = 0;
    }

    else {
        bannerImages.eq(bannerCurrentImgIndex).animate({ 'left': '-725px' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex + 1).animate({ 'left': '0' }, 'slow');
        bannerImages.eq(bannerCurrentImgIndex - 1).css({ 'position': 'absolute', 'left': '725px' });
        bannerCurrentImgIndex = bannerCurrentImgIndex + 1;
    }
}

$(document).ready(function () {
    timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
    link = $("#myGallery .main_pic_btn");
    link.hover(function () { timer = clearInterval(timer); },
    function () {
        if (timer == null)
            timer = setInterval(function () { bannerDoWork(); }, displayTimeout);
    });

});

Answer 1

我找到答案！我设置了animate参数queue = false - 现在效果很好！例如：

firstPic.animate({ left: 0, top: 0 }, { queue: false, duration: "slow" });

当页面失去焦点时，带有setInterval（）方法的jQuery库无法正常工作

1 个答案: