Автоматическая смена картинок

@DRANOC · Регистрация: 21.07.2017

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

Суть проблемы вот в чем:
Написал скрипт(javascript) меняющий одну картинку на странице через определенный интервал.
Вопрос в том как прописать одновременное изменение нескольких картинок на несколько других. Возможно ли такое?

@Balanaar · 31.08.2017, 12:52

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

Возможно ли такое?

Да, возможно.

@DRANOC · 31.08.2017, 12:54 **[ТС]**

Можете подсказать как?

@Balanaar · 31.08.2017, 13:25

Насколько информативен вопрос - настолько же информативен ответ.

@DRANOC · 31.08.2017, 13:33 **[ТС]**

<html>
<head>
<script type="text/javascript">
var total_pics_num = 4;
var interval = 5000;
var time_out = 1;
var i = 0;
var timeout;
var opacity = 100;
function fade_to_next() {
opacity--;
var k = i + 1;
var image_now = 'image_' + i;
if (i == total_pics_num) k = 1;
var image_next = 'image_' + k;
document.getElementById(image_now).style .opacity = opacity/100;
document.getElementById(image_now).style .filter = 'alpha(opacity='+ opacity +')';
document.getElementById(image_next).styl e.opacity = (100-opacity)/100;
document.getElementById(image_next).styl e.filter = 'alpha(opacity='+ (100-opacity) +')';
timeout = setTimeout("fade_to_next()",time_out);
if (opacity==1) {
opacity = 100;
clearTimeout(timeout);
}
}
setInterval (
function() {
i++;
if (i > total_pics_num) i=1;
fade_to_next();
}, interval
);
</script>
</head>
<body>
<div>
<img src='image/image_1.png' align="right" width="600" height="400" alt="" id="image_1" style="position: absolute;" />
<img src='image/image_2.png' width="600" height="400" alt="" id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='image/image_3.jpg' width="600" height="400" alt="" id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
<img src='image/image_4.jpg' width="600" height="400" alt="" id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" />
</div>
</body>
</html>
4 изображения чередуются каждые 5 секунд, а вот как сделать чтобы например на странице было image_1 и image_2 и они менялись каждые 5 секунд на другие 2 изображения.

Новые блоги и статьи Все статьи Все блоги /
Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .
Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .	Фото: Daniel Greenwood kumehtar 13.11.2025	Расскажи мне о Мире, бродяга kumehtar 12.11.2025 — Расскажи мне о Мире, бродяга, Ты же видел моря и метели. Как сменялись короны и стяги, Как эпохи стрелою летели. - Этот мир — это крылья и горы, Снег и пламя, любовь и тревоги, И бескрайние. . .	PowerShell Snippets iNNOKENTIY21 11.11.2025 Модуль PowerShell 5. 1+ : Snippets. psm1 У меня модуль расположен в пользовательской папке модулей, по умолчанию: \Documents\WindowsPowerShell\Modules\Snippets\ А в самом низу файла-профиля. . .

@DRANOC 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 74

	Автоматическая смена картинок 31.08.2017, 12:40. Показов 4463. Ответов 4 Метки нет (Все метки) Суть проблемы вот в чем: Написал скрипт(javascript) меняющий одну картинку на странице через определенный интервал. Вопрос в том как прописать одновременное изменение нескольких картинок на несколько других. Возможно ли такое? 0

@DRANOC 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 74
	31.08.2017, 12:54 [ТС]
	Можете подсказать как? 0

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	31.08.2017, 13:25
	Насколько информативен вопрос - настолько же информативен ответ. 0

@DRANOC 0 / 0 / 0 Регистрация: 21.07.2017 Сообщений: 74
	31.08.2017, 13:33 [ТС]
	<html> <head> <script type="text/javascript"> var total_pics_num = 4; var interval = 5000; var time_out = 1; var i = 0; var timeout; var opacity = 100; function fade_to_next() { opacity--; var k = i + 1; var image_now = 'image_' + i; if (i == total_pics_num) k = 1; var image_next = 'image_' + k; document.getElementById(image_now).style .opacity = opacity/100; document.getElementById(image_now).style .filter = 'alpha(opacity='+ opacity +')'; document.getElementById(image_next).styl e.opacity = (100-opacity)/100; document.getElementById(image_next).styl e.filter = 'alpha(opacity='+ (100-opacity) +')'; timeout = setTimeout("fade_to_next()",time_out); if (opacity==1) { opacity = 100; clearTimeout(timeout); } } setInterval ( function() { i++; if (i > total_pics_num) i=1; fade_to_next(); }, interval ); </script> </head> <body> <div> <img src='image/image_1.png' align="right" width="600" height="400" alt="" id="image_1" style="position: absolute;" /> <img src='image/image_2.png' width="600" height="400" alt="" id="image_2" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> <img src='image/image_3.jpg' width="600" height="400" alt="" id="image_3" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> <img src='image/image_4.jpg' width="600" height="400" alt="" id="image_4" style="opacity: 0; filter: alpha(opacity=0); position: absolute;" /> </div> </body> </html> 4 изображения чередуются каждые 5 секунд, а вот как сделать чтобы например на странице было image_1 и image_2 и они менялись каждые 5 секунд на другие 2 изображения. 0

Опции темы