Как сделать, чтобы 3 картинки менялись с коротким интервалом, раз в 4 секунды javascript?

Question

[chill boy]

Есть три картинки, нужно чтобы они менялись между собой за короткий промежуток один раз в несколько секунд.

Нашел такой код, но он зациклен

var img = 1, imgMax = 3;
function func(){
var image = document.getElementById('image');
setInterval(function() {
image.src = (++img > imgMax ? (img = 1) : img) + '.jpg';
}, 200);
};

Comments

[Stalker_RED]

И что не так с этим примером?

[chill boy]

Stalker_RED, Он зацикливает эти 3 фотки, а мне надо, чтобы они менялись так же быстро, но после того как все 3 поменяются, был небольшой промежуток в 4 секунды

Answer 1

[Ihor Bratukh]

<div>
    <img data-loop-src='[
        "https://picsum.photos/150/150/?image=10",
        "https://picsum.photos/150/150/?image=25",
        "https://picsum.photos/150/150/?image=30"
    ]'>
    <img data-loop-src='[
        "https://picsum.photos/150/150/?image=5",
        "https://picsum.photos/150/150/?image=8",
        "https://picsum.photos/150/150/?image=4"
    ]'>
    <img data-loop-src='[
        "https://picsum.photos/150/150/?image=2",
        "https://picsum.photos/150/150/?image=99",
        "https://picsum.photos/150/150/?image=84"
    ]'>
</div>

<script>
    document.querySelectorAll('[data-loop-src]').forEach(image => {
        const list = JSON.parse(image.dataset.loopSrc);
        (function timer(index = 0) {
            setTimeout(() => {
                if (list[index]) {
                    image.src = list[index];
                    timer(++index);
                } else {
                    setTimeout(timer, 4000);
                }
            }, 200);
        })();
    });
</script>

Comments

[chill boy]

Спасибо большое