Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.07.2016, 15:45
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

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

<!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, 16.07.2016 в 15:48.
Ответить с цитированием
  #2 (permalink)  
Старый 17.07.2016, 11:25
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

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>
Ответить с цитированием
  #3 (permalink)  
Старый 17.07.2016, 12:11
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Круто, спасибо, это то что надо. А можете ещё объяснить вот эту строчку
indx = ++indx%len;
Я понял что это счетчик который будет перебирать последовательно все элементы массива с данными arrSrc , но меня смутил вот преффикс %len;
Что он означает ?
Ответить с цитированием
  #4 (permalink)  
Старый 17.07.2016, 12:17
Аватар для Botik21
Аспирант
Отправить личное сообщение для Botik21 Посмотреть профиль Найти все сообщения от Botik21
 
Регистрация: 01.06.2016
Сообщений: 87

Так понятней?
indx = ++indx % len;

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

Последний раз редактировалось Botik21, 17.07.2016 в 12:19.
Ответить с цитированием
  #5 (permalink)  
Старый 17.07.2016, 20:20
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

Сообщение от Black_Star
А можете ещё объяснить вот эту строчку
indx = ++indx%len;
Люблю такие штуки от рони. Код равнозначен
indx = indx !== len-1 ? ++indx : indx = 0;
Ответить с цитированием
  #6 (permalink)  
Старый 17.07.2016, 21:22
Аватар для Black_Star
Профессор
Отправить личное сообщение для Black_Star Посмотреть профиль Найти все сообщения от Black_Star
 
Регистрация: 11.07.2016
Сообщений: 300

Сообщение от Rasy Посмотреть сообщение
Люблю такие штуки от рони. Код равнозначен
indx = indx !== len-1 ? ++indx : indx = 0;
Через тернарный оператор оно конечно попонятнеею Проверяеться значение, пока indx не равен (длинна массива - 1) прибавлять новый элемент, если indx== равен (длинна массива - 1) придать значение indx = 0.
А можно где то подробнее про знак % узнать, а то я его только как остаток от деления где-то видал мельком
Ответить с цитированием
  #7 (permalink)  
Старый 17.07.2016, 21:39
Профессор
Отправить личное сообщение для Rasy Посмотреть профиль Найти все сообщения от Rasy
 
Регистрация: 17.06.2016
Сообщений: 509

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

var a = 0;
alert(++a % 3);
alert(++a % 3);
alert(++a % 3);
Ответить с цитированием
  #8 (permalink)  
Старый 17.07.2016, 21:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от Black_Star
то я его только как остаток от деления
здесь остаток и используется
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вставка в div другой страницы из другой папки Mr29A jQuery 1 12.11.2013 11:08
Скрипт смены картинок от времени zoOmer Общие вопросы Javascript 2 09.09.2013 09:19
вставка картинок в iframe Nightraven Internet Explorer 0 26.01.2011 00:09
вставка картинок MegaGoblin Общие вопросы Javascript 4 27.04.2010 17:24
вставка картинок одним кликом MegaGoblin Общие вопросы Javascript 12 25.03.2010 13:20