Javascript-форум - Вставка картинок из папки с задержкой по времени.

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Вставка картинок из папки с задержкой по времени. (https://javascript.ru/forum/misc/64038-vstavka-kartinok-iz-papki-s-zaderzhkojj-po-vremeni.html)

Вставка картинок из папки с задержкой по времени.

Добрый день. Вот какая идея - сделать вставку картинок из папки. с задержкой по времени. Каждая новая картинка будет появляться на месте прошлой.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Picture</title>
    <style type="text/css">
    #box {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: green;
        color: white;
    }
    
    #textBox {
        float: right;
        background-color: red;
        color: white;
        font-size: 1.2em;
        height: 100px;
        width: 200px;
    }
    </style>
</head>

<body>
    <div id="box">
        <div id="pictureBox"></div>
        <div id="textBox"></div>
    </div>
    <script type="text/javascript">
    var div = document.getElementById('box');
    var textBox = document.getElementById('textBox');


    textBox.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";


    function pictureBox() {
        var parentEl = document.getElementById("pictureBox"),
            img = document.createElement("IMG");

        img.src = "pic/1.jpg";
        img.width = "150";
        img.height = "150";

        parentEl.appendChild(img);

    }

    var Timer = setTimeout(pictureBox, 3000);

    console.log("Vse OK");
    </script>
</body>

</html>

Подскажите пожалуйста, как реализовать? Я так понимаю, что картинки надо поместить в некий массив, по которому будет ити бесконечный цикл зависящий от задержки во времени ?

Black_Star,
:-?

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Picture</title>
    <style type="text/css">
    #box {
        position: relative;
        width: 500px;
        height: 300px;
        background-color: green;
        color: white;
    }

    #textBox {
        float: right;
        background-color: red;
        color: white;
        font-size: 1.2em;
        height: 100px;
        width: 200px;
    }
    </style>
</head>

<body>
    <div id="box">
        <div id="pictureBox"></div>
        <div id="textBox"></div>
    </div>
    <script type="text/javascript">
    var div = document.getElementById('box');
    var textBox = document.getElementById('textBox');
    var parentEl = document.getElementById("pictureBox"),
       img = document.createElement("IMG");
        img.width = "150";
        img.height = "150";

        parentEl.appendChild(img);

    textBox.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";
    var arrSrc = ["http://i58.fastpic.ru/big/2013/1229/64/ea5a462abc691f56592c3c68768ed864.jpg",
    "http://www.chelnyltd.ru/images/article/3_9902_pic_13%D0%B0%D0%BF%D1%80%D0%B5%D0%BB%D1%8F%D0%A0%D0%9E%D0%9A.jpeg",
    "http://portamur.ru/upload/iblock/3af/-mkpk.jpg"], indx = 0, len = arrSrc.length;

    (function pictureBox() {
    img.src = arrSrc[indx];
    indx = ++indx%len;
    setTimeout(pictureBox, 3000);
    })()

    </script>
</body>

</html>

Круто, спасибо, это то что надо. А можете ещё объяснить вот эту строчку
indx = ++indx%len;
Я понял что это счетчик который будет перебирать последовательно все элементы массива с данными arrSrc , но меня смутил вот преффикс %len;
Что он означает ?

Так понятней?

indx = ++indx % len;

Она не позволяет значению indx выйти за пределы массива

Цитата:

Сообщение от Black_Star

А можете ещё объяснить вот эту строчку
indx = ++indx%len;

Люблю такие штуки от рони. Код равнозначен

indx = indx !== len-1 ? ++indx : indx = 0;

Цитата:

Сообщение от Rasy (Сообщение 422367)

Люблю такие штуки от рони. Код равнозначен

indx = indx !== len-1 ? ++indx : indx = 0;

Через тернарный оператор оно конечно попонятнеею Проверяеться значение, пока indx не равен (длинна массива - 1) прибавлять новый элемент, если indx== равен (длинна массива - 1) придать значение indx = 0.
А можно где то подробнее про знак % узнать, а то я его только как остаток от деления где-то видал мельком :write:

Цитата:

Сообщение от Black_Star

А можно где то подробнее про знак % узнать, а то я его только как остаток от деления где-то видал мельком

Все очень просто. По логики, на третьем вызове функции индекс должен обнуляться.

var a = 0;
alert(++a % 3);
alert(++a % 3);
alert(++a % 3);

Цитата:

Сообщение от Black_Star

то я его только как остаток от деления

здесь остаток и используется