Циклическая смена картинок на jQuery by Apocalypse

Разместил: Apocalypse
Опубликовано: 20 июля 2016

Скрипт разработан по просьбе пользователя fapalnaapo. Суть кода в том, что он поочерёдно сменяет картинки с нужной скоростью, что позволит сделать покадровую анимацию Для начала посмотрите ДЕМО Установка: 1#: В самый низ вашего CSS вставьте:

.apochange img, .apochange1 img, .apochange2 img {
display: none;
}

.apochange img, .apochange1 img, .apochange2 img {

display: none;

}

2#: HTML код примера:

<div class="apochange">
<img src="https://imapo.ru/img/2.jpg" />
<img src="https://imapo.ru/img/3.jpg" />
<img src="https://imapo.ru/img/4.jpg" />
<img src="https://imapo.ru/img/5.jpg" />
</div>

<div class="apochange1">
<img src="https://imapo.ru/img/2.jpg" />
<img src="https://imapo.ru/img/3.jpg" />
<img src="https://imapo.ru/img/4.jpg" />
<img src="https://imapo.ru/img/5.jpg" />
</div>

<div class="apochange2">
<img src="https://imapo.ru/img/2.jpg" />
<img src="https://imapo.ru/img/3.jpg" />
<img src="https://imapo.ru/img/4.jpg" />
<img src="https://imapo.ru/img/5.jpg" />
<img src="https://imapo.ru/img/6.jpg" />
</div>

</div>

</div>

</div>

3#: jQuery код примера (Вставить сразу после предыдущего кода):

<script>
$(function() {
var apoelement = $('.apochange, .apochange1, .apochange2'), // Элементы
apospeed = 500; // Скорость смены картинок

apoelement.each(function() {
var aponumber = 0;
var t = $(this);
var apolen = t.find('img').size();
setInterval(function() {
if (aponumber == apolen) {
t.find('img').eq(apolen - 1).hide();
t.find('img').eq(0).show();
aponumber = 1;
} else {
t.find('img').eq(aponumber).show();
t.find('img').eq(aponumber - 1).hide();
aponumber = aponumber + 1;
}
}, apospeed);
});
});
</script>

$(function() {

var apoelement = $('.apochange, .apochange1, .apochange2'), // Элементы

apospeed = 500; // Скорость смены картинок

apoelement.each(function() {

var aponumber = 0;

var t = $(this);

var apolen = t.find('img').size();

setInterval(function() {

if (aponumber == apolen) {

t.find('img').eq(apolen - 1).hide();

t.find('img').eq(0).show();

aponumber = 1;

} else {

t.find('img').eq(aponumber).show();

t.find('img').eq(aponumber - 1).hide();

aponumber = aponumber + 1;

}

}, apospeed);

});

</script>

Метки: Apocalypse jQuery Анимация Кадр Картинок Покадровая Смена Счётчик Циклическая

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

Вы точно не робот?

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Звука не услышал, сколько ни кликал» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 07:35:22

Всевидящее око

Новый комментарий от пользователя VVL99: «Звук есть только при грозе.
Остальные сцены без звука, можно конечно добавить ветер и дождь.» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 14:56:22

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Всё, попалась эта сцена. Шикарно!» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 19:02:48

Всевидящее око

Новый комментарий от пользователя Дмитрий: «А возможно сделать с кнопкой , что бы при нажатие на кнопку он подгружал материалы.» в материале Автоматическая подгрузка всех материалов Каталога файлов by Apocalypse для uCoz

2023-11-04 19:04:53

Всевидящее око

Новый комментарий от пользователя VVL99: «Если нужна конкретная сцена, ниже написано как именно её вызвать и дать постоянную ссылку.
Некоторые сцены имеют ещё и арианты, так что в общей сложности их вроде 18.» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-04 21:18:21

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Молодец, хорошо поработал!» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-05 12:22:10

Всевидящее око

Новый комментарий от пользователя VVL99: «Всплывающая подсказка под курсором - _http://ipic.su/img/img7/fs/171.1699176980.png» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-05 14:37:47

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Ага, я уже потом увидел, когда курсор остановился» в материале Плывущие облака с Parallax эффектом на HTML5 Canvas

2023-11-06 21:16:35

Apocalypse

Всем доброго дня. Как дела?

2023-11-19 12:50:59

VVL99

@Apocalypse
"Всем доброго дня. Как дела?"
Добрых дней уже давно нет, а дела всё хуже, но вера спасает.

2023-12-04 01:37:49

......

Для публикации сообщений в чате необходимо авторизоваться

Пн	Вт	Ср	Чт	Пт	Сб	Вс
				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

Циклическая смена картинок на jQuery by Apocalypse

Вам может также понравиться...

Посетители сайта

Панель управления

Циклическая смена картинок на jQuery by Apocalypse

Вам может также понравиться...

Переключение страниц по CTRL + стрелочка направления by Apocalypse для uCoz

Падающие листья со снегом на HTML5 + CSS3 + jQuery

Слайдер изображений через плагин AviaSlider на jQuery

Посетители сайта

Панель управления