Question

我尝试创建一张包含5张图片的幻灯片，但javascript无效

<body onload='slide(0)'>
    <div id='slide'>
    </div>
</body>

这是我使用的javascript;

function slide(i)
{
    document.getElementById('slide')
        .style.backgroundImage = 'url(../img/' + i + '.jpg)';
    setTimeout(slide((i+1)%5), 3000);
}

Answer 1

这是因为您没有设置定时器的函数引用，而是仅调用函数slide并将结果设置为未定义的定时器的回调。

尝试：

function slide(i) {
    document.getElementById('slide').style.backgroundImage = 'url(../img/' + i + '.jpg)';
    setTimeout(function () { //<-- Set the reference here
        slide((i + 1) % 5); //Get the mod
    }, 3000);
}

或使用function.bind

function slide(i) {
    document.getElementById('slide').style.backgroundImage = 'url(../img/' + i + '.jpg)';
    setTimeout(slide.bind(this, (++i) % 5), 3000);//<-- Set the function context using bind with the argument as next value of i
}

使用javascript无法正常滑动

1 个答案: