Смена картинок на JavaScript

@Ivanych · Регистрация: 22.06.2011

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

В общем нужен JavaScript который будет поочерёдно показывать одну из трёх картинок,меняются картинки каждые 5 секунд.

@NEOSYS · 23.06.2011, 12:50

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var images = new Array();
var i = 0;
 
images[0] = './images/1.gif';
images[1] = './images/2.gif';
images[2] = './images/3.gif';
 
function viewImages() {
    document.write('<img src="'+images[i]+'">');
    i++;
    if (i == images.length) {
        i = 0;
    }
    setTimeout("viewImages()",5000);
}

@Ivanych · 23.06.2011, 15:28 **[ТС]**

Код вроде правильный,его вставляю и всёрно ничего не показывает.

@NEOSYS · 23.06.2011, 15:48

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
    <head>
        <title> Images view </title>
    </head>
<body>
<script type="text/javascript">
    var images = new Array();
    var i = 0;
     
    images[0] = './images/1.jpg';
    images[1] = './images/2.jpg';
    images[2] = './images/3.jpg';
     
    function viewImages() {
        document.getElementById("img_main").src = images[i]; 
        i++;
        if (i == images.length) {
            i = 0;
        }
        setTimeout("viewImages()",5000);
    }   
</script>
 
<img src="" id="img_main">
 
<script> viewImages(); </script>
 
</body>
</html>

Проверил у себя - точно работает все нормально

@Ivanych · 23.06.2011, 18:10 **[ТС]**

Спасибо!!!)))Работает,хоть один понимающий человек нашёлся)

@NEOSYS · 23.06.2011, 19:01

Не за что

@Glebzilla · 24.02.2021, 10:22

Привет! Яндекс убрал названия Городов из информера. Как теперь добавить эти названия, чтобы они менялись одновременно с картинкой?

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<body>
<script type="text/javascript">
    var images = new Array();
    var i = 0;
     
    images[1] = 'http://info.weather.yandex.net/11123/4_white.ru.png?domain=ru';/* Казань */
    images[0] = 'http://info.weather.yandex.net/43/4_white.ru.png?domain=ru';/* Елабуга */
    images[2] = 'http://info.weather.yandex.net/236/4_white.ru.png?domain=ru';/* Набережные Челны */
    images[3] = 'http://info.weather.yandex.net/11127/4_white.ru.png?domain=ru';/* Нижнекамск */
    images[4] = 'http://info.weather.yandex.net/11126/4_white.ru.png?domain=ru';/* Лениногорск */
    images[5] = 'http://info.weather.yandex.net/20012/4_white.ru.png?domain=ru';/* Агрыз */
    images[6] = 'http://info.weather.yandex.net/11122/4_white.ru.png?domain=ru';/* Бугульма */
    images[7] = 'http://info.weather.yandex.net/11128/4_white.ru.png?domain=ru';/* Нурлат */
    images[8] = 'http://info.weather.yandex.net/20586/4_white.ru.png?domain=ru';/* Буинск */
    images[9] = 'http://info.weather.yandex.net/11125/4_white.ru.png?domain=ru';/* Зеленодольск */
     
    function viewImages() {
        document.getElementById("img_main").src = images[i]; 
        i++;
        if (i == images.length) {
            i = 0;
        }
        setTimeout("viewImages()",3600);
    }
<a href="https://yandex.ru/pogoda/"><img src="" id="img_main">
            <script> viewImages(); </script></a>
</body>

@amr-now · 24.02.2021, 11:57

Glebzilla,

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <div>
        <a href="https://yandex.ru/pogoda/">
            <img src="" id="img_main">
        </a>
        <div></div>
    </div>
    <script>
        let i = -1,
            img = document.getElementById('img_main');
        let images = [
            ['http://info.weather.yandex.net/11123/4_white.ru.png?domain=ru', 'Казань'],
            ['http://info.weather.yandex.net/43/4_white.ru.png?domain=ru', 'Елабуга'],
            ['http://info.weather.yandex.net/236/4_white.ru.png?domain=ru', 'Набережные Челны'],
            ['http://info.weather.yandex.net/11127/4_white.ru.png?domain=ru', 'Нижнекамск'],
            ['http://info.weather.yandex.net/11126/4_white.ru.png?domain=ru', 'Лениногорск'],
            ['http://info.weather.yandex.net/20012/4_white.ru.png?domain=ru', 'Агрыз'],
            ['http://info.weather.yandex.net/11122/4_white.ru.png?domain=ru', 'Бугульма'],
            ['http://info.weather.yandex.net/11128/4_white.ru.png?domain=ru', 'Нурлат'],
            ['http://info.weather.yandex.net/20586/4_white.ru.png?domain=ru', 'Буинск'],
            ['http://info.weather.yandex.net/11125/4_white.ru.png?domain=ru', 'Зеленодольск']
        ];
 
        viewImages();
        setInterval(viewImages, 3600);
 
        function viewImages() {
            if (++i === images.length) i = 0;
            img.src = images[i][0];
            img.parentElement.nextElementSibling.textContent = images[i][1];
        }
    </script>
</body>
</html>

Адреса картинок для разных городов: https://yandex.ru/pogoda/10738/informer

@Glebzilla · 24.02.2021, 12:18

Спасибо! Но пропала совместимость с IE. Проблема в тексте?

@amr-now · 24.02.2021, 12:29

Glebzilla, let на var замените. И img.parentElement.nextElementSibling.innerText = images[i][1];

А вообще если серьезно - для старых браузеров надо пользоваться транспиляторами Babel или TypeScript.

Добавлено через 3 минуты
----
Здесь совместимость с IE9. Для более старых версий подбирать скрипт не буду.

Новые блоги и статьи Все статьи Все блоги /
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .
Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .

@Ivanych 1 / 1 / 0 Регистрация: 22.06.2011 Сообщений: 32

	Смена картинок на JavaScript 22.06.2011, 17:15. Показов 39410. Ответов 9 Метки нет (Все метки) В общем нужен JavaScript который будет поочерёдно показывать одну из трёх картинок,меняются картинки каждые 5 секунд. 0

@Ivanych 1 / 1 / 0 Регистрация: 22.06.2011 Сообщений: 32
	23.06.2011, 15:28 [ТС]
	Код вроде правильный,его вставляю и всёрно ничего не показывает. 0

@Ivanych 1 / 1 / 0 Регистрация: 22.06.2011 Сообщений: 32
	23.06.2011, 18:10 [ТС]
	Спасибо!!!)))Работает,хоть один понимающий человек нашёлся) 0

@NEOSYS 26 / 20 / 5 Регистрация: 28.04.2009 Сообщений: 75
	23.06.2011, 19:01
	Не за что 2

@Glebzilla 0 / 0 / 0 Регистрация: 24.02.2021 Сообщений: 2
	24.02.2021, 12:18
	Спасибо! Но пропала совместимость с IE. Проблема в тексте? 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	24.02.2021, 12:29
	Glebzilla, let на var замените. И `img.parentElement.nextElementSibling.innerText = images[i][1];` А вообще если серьезно - для старых браузеров надо пользоваться транспиляторами Babel или TypeScript. Добавлено через 3 минуты ---- Здесь совместимость с IE9. Для более старых версий подбирать скрипт не буду. 1

Опции темы