Циклическая смена картинок на jQuery by Apocalypse
Скрипт разработан по просьбе пользователя fapalnaapo. Суть кода в том, что он поочерёдно сменяет картинки с нужной скоростью, что позволит сделать покадровую анимацию
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 |
.apochange img, .apochange1 img, .apochange2 img { display: none; } |
2#: HTML код примера:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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> |
3#: jQuery код примера (Вставить сразу после предыдущего кода):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<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> |
