JS-gif, анимация на яваскрипте нескольких картинок

27.01.2018  11:09

Простая задача: сделать анимацию нескольких картинок а-ля гифка.

Яваскрипт:
var images = 0; //Общее кол-во картинок в слое
var now_show = 1; //Картинка показываемая в текущий момент времени
$(document).ready(function() {
	images = $('#slider_top > a'); //Массив с картинками
	$('#slider_top > a:first').show(); //Находим первую картинку по показываем ее
	setInterval("next_image('#slider_top')", 3000); //Таймер смены картинок (в милисекундах)
});
//Функция показа картинок
function showImage(id,block) {
	now_show = id;
	//$('#slider_top > a:visible').fadeOut('normal', function() {//эффект затухания
	$(block+' > a:visible').hide();
	$(images[id-1]).fadeIn('normal');
	//});
}
//Функция проверяет не выходит ли текущее значение счетчика за его пределы, если нет - увеличивает счетчик на 1 и показывает слеедующую картинку
function next_image(block) {	
	if (now_show == images.length)
		now_show = 1;
	else
		now_show++;
	showImage(now_show,block);
}


Две небольшие функции на Javascript и циклическая анимация картинок готова.

Пример анимации:
JS-gif, анимация на яваскрипте нескольких картинок


перейти в Блог | Блог (стр. 4)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): JavaScript 24  jQuery 19  web-программирование 80  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)