Бесконечная анимация на JS

@Guneska · Регистрация: 05.12.2012

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

Доброго времени суток, уважаемые форумчане! Перелопатила достаточно информации, и здесь искала нужную информацию, но она сложнее чем нужно, и мне пока не по зубам, т.к. яваскрип только начала изучать.
Задание: есть три картинки, нужно, чтобы они постоянно сменяли друг дружку. Нашла простенький код, даже с комментариями автора, на сайте урока он работает бесконечно, а у меня делает только один проход и застопоряется.

Кликните здесь для просмотра всего текста

HTML5
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
40
41
<!DOCTYPE HTML>
 
<html>
 
<head>
  <title>Animation</title>
  <!-- Данный скрипт надо поместить в заголовке документа -->
<script language="JavaScript">
i=0;
img_a=new Array();   // Объявляется массив
img_a[0]=new Image();
img_a[1]=new Image();
img_a[2]=new Image();
 
 
img_a[0].src="1.jpg"; // Каждому элементу
img_a[1].src="2.jpg"; // массива присваивается
img_a[2].src="3.jpg"; // конкретная картинка
 
 
function img_b()     // описывается функция последовательного
                     // вывода картинок
{
document.images[0].src=img_a[i].src;
 
i++;
if (i>3) i=0;
setTimeout("img_b()", 1000);
}
</SCRIPT>
<!-- Скрипт закончен -->
 
</head>
 
<body bgcolor="#ffffff" onLoad=img_b()>
 
<img src="1.jpg">
 
</body>
 
</html>

@vovandr · 08.02.2014, 17:47

HTML5
1
 <img id="myImage" src="1.jpg" alt="">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
 var images = ['1.jpg', '2.jpg', '3.jpg'],
        x = 0,
        imageContainer =  document.getElementById('myImage');
        
 
    function changeImagesAuto() {
        x++;
        if (x == images.length) x = 0;
        imageContainer.src = images[x]; 
    }
 
    setInterval(changeImagesAuto, 1000);

Добавлено через 15 минут
Ну и конечно вот это images.length надо бы тоже в перекменную вынести так как эта величина всегда постоянная и нам незачем ее каждый раз высчитывать заново

я думаю сами справитесь

@Guneska · 09.02.2014, 14:10 **[ТС]**

Вообще перестало работать, показывается только первая картинка...

@vovandr · 09.02.2014, 14:14

Вообще перестало работать, показывается только первая картинка...

Скрипт поставьте перед закрывающим тегом body или на событии onload

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .	SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .

@Guneska 0 / 0 / 0 Регистрация: 05.12.2012 Сообщений: 30
	09.02.2014, 14:10 [ТС]
	Вообще перестало работать, показывается только первая картинка... 0

Бесконечная анимация на JS

Решение