Слайд с JavaScript не работает

Я пытался создать слайд из 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);
}

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
}
Другие вопросы по тегам