Смена картинок через каждую секунду

@katya8408 · Регистрация: 20.11.2016

Author24 — интернет-сервис помощи студентам

Имеются картинки с цифрами 3,2,1,0.При загрузке страницы должны меняться картинки от 3 до 0 каждую секунду. После того как картинка с цифрой "0" подержится на экране одну секунду, следует загрузить другую страницу (любую).
Вот мой скрипт, но он не работает

PHP/HTML

 
 <script> 
function() {     
    var i = 0;
    var pics = [ "2.gif", "1.gif","0.gif"  ];
    var el = document.getElementById('img');  
    function toggle() {
        el.src = pics[i];           
        i = (i + 1) % pics.length;  
    }
    setInterval(toggle, 1000);
};  
</script>
  </head>
  <body>
     <img src="3.gif" id="img"></td>
  </body>
</html>

@Sorcessers · 08.12.2018, 11:08

У тебя скрипт раньше обрабатывается, чем страница отрисуется.
Добавь атрибут defer, если скрипт подключен из файла, тут можно почитать https://learn.javascript.ru/external-script

В твоем случае скрипт подключи перед закрывающим тегом body.

@amr-now · 08.12.2018, 19:31

Например, можно так:

PHP/HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="module">
        let pics = ["2.gif", "1.gif", "0.gif"],
            el = document.getElementById('img'),
            i = 0,
            id;
 
        el.onload = () => { if (!i) id = setInterval(toggle, 1000); };
 
        function toggle() {
            console.log(i);
            if (i === pics.length) {
                clearInterval(id);
                window.location = "http://mail.ru";
            }
            el.src = pics[i++];
        }
    </script>
</head>
<body>
    <img src="3.gif" id="img"></td>
</body>
</html>

Добавлено через 2 минуты
Непонятно, одну секунду надо выдерживать строго, независимо от времени загрузки картинки?
Или одна секунда должна быть между загруженными картинками?
Это разные алгоритмы.

Добавлено через 1 час 39 минут
Да. Ждать одну секунду после каждой загрузки картинки даже правильнее и наверно соответствует условию задачи:

PHP/HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <script type="module">
        // Функция ожидания ms-миллисекунд
        let delay = (ms) => new Promise((resolve) => { setTimeout(resolve, ms); });
 
        let pics = ["2.gif", "1.gif", "0.gif"],
            el = document.getElementById('img'),
            i = 0,
            id;
 
        el.onload = async () => {
            await delay(1000); // После загрузки предыдущей картинки подождать одну секунду
            if (i === pics.length)
                window.location = "http://mail.ru";
            else
                el.src = pics[i++];
        };
    </script>
</head>
<body>
    <img src="3.gif" id="img"></td>
</body>
</html>

@Sorcessers 10 / 8 / 2 Регистрация: 04.01.2018 Сообщений: 57
	08.12.2018, 11:08	2
	У тебя скрипт раньше обрабатывается, чем страница отрисуется. Добавь атрибут defer, если скрипт подключен из файла, тут можно почитать https://learn.javascript.ru/external-script В твоем случае скрипт подключи перед закрывающим тегом body. 0

	08.12.2018, 19:31

Опции темы