Как сделать динамическую галерею из плиток на javascript?


Приветствую тебя - дорогой читатель! В этом уроке я покажу, как сделать легкую и красивую галерею из плиток на  javascript! Как сделать динамическую галерею из плиток на javascript (jquery)? Как и во всех остальных уроках по javascript, в конце описания можно будет посмотреть пример, а также, скачать все файлы рабочего примера. Наша галерея будет состоять из плиток (квадратиков) разного размера - на месте этих квадратиков будут изображения, которые, динамически, будут меняться каждые 4 секунды. Давайте рассмотрим схему, по которой будут сверстаны элементы общего квадрата: Схема расположения изображений   HTML верстка:
<div class="wrap">

	<img id="img_1" src="img/1.jpg">
	<img id="img_2" src="img/2.jpg">
	<img id="img_3" src="img/3.jpg">
	<img id="img_4" src="img/4.jpg">
	<img id="img_5" src="img/5.jpg">
	<img id="img_6" src="img/6.jpg">
	<img id="img_7" src="img/7.jpg">
	<img id="img_8" src="img/8.jpg">
	<img id="img_9" src="img/9.jpg">
	<img id="img_10" src="img/10.jpg">
	
</div>
В div обертке находятся изображения, и поэтому, чтобы заменить картинки на свои, достаточно изменить ссылку на изображение в атрибуте src.   CSS стили:
	.wrap{
    width: 640px;
    height: 640px;
	margin: 30px auto;
	box-shadow: 0 0 10px rgba(158, 143, 143, 0.5);
	border-radius: 20px;
	}
	
	.wrap img{
	position: absolute;
	}
	
   	#img_1{		
	border-radius: 20px 0 0 0;
	-moz-border-radius: 20px 0 0 0;
	-webkit-border-radius: 20px 0 0 0;
	}
   
	#img_1,#img_9,#img_10{		
    width: 240px;
    height: 240px;
	}
	
	#img_2{		
    width: 400px;
    height: 400px;
	margin: 0 0 0 240px;
	border-radius: 0 20px 0 0;
	-moz-border-radius: 0 20px 0 0;
	-webkit-border-radius: 0 20px 0 0;
	}
	
	#img_3,#img_8{		
    width: 160px;
    height: 160px;
	}
	
	#img_3{
    margin: 240px 0 0 0;
	}
	
	#img_4,#img_5,#img_6,#img_7{		
    width: 80px;
    height: 80px;
	}
	
	#img_4{
	margin: 240px 0 0 160px;
	}
	
	#img_5{
	margin: 320px 0 0 160px;
	}
	
	#img_6{
	margin: 400px 0 0 0;
	}
	
	#img_7{
	margin: 400px 0 0 80px;
	}
	
	#img_8{
	margin: 480px 0 0 0;
	border-radius: 0 0 0 20px;
	-moz-border-radius: 0 0 0 20px;
	-webkit-border-radius: 0 0 0 20px;
	}
	
	#img_9{		
    margin: 400px 240px 0 160px;
	}
	
	#img_10{
    margin: 400px 0 0 400px;
	border-radius: 0 0 20px 0;
	-moz-border-radius: 0 0 20px 0;
	-webkit-border-radius: 0 0 20px 0;
	}
Здесь мы с помощью абсолютного позиционирования задаем расположение блоков. Цифрами, на схеме выше, обозначены номера элементов, соответствующих идентификаторам в стилях (например, картинка с цифрой 5, соответствует id = img_5).   Рассмотрим JavaScript код (jquery):
$(document).ready(function(){

	function dynamic_gallery() { 
	
		r1 = Math.round(Math.random() * (2 - 1) + 1);
		r2 = Math.round(Math.random() * (5 - 3) + 3);
		r3 = Math.round(Math.random() * (8 - 6) + 6);
		r4 = Math.round(Math.random() * (10 - 9) + 9);
		
		obmen = $('#img_' + r1 ).attr('src');
		$('#img_' + r1 ).attr('src', $('#img_' + r3 ).attr('src')).animate({opacity: 0.75},500).animate({opacity: 1},300);
		$('#img_' + r3 ).attr('src', obmen).animate({opacity: 0.75},500).animate({opacity: 1},300);
		
		obmen = $('#img_' + r2 ).attr('src');
		$('#img_' + r2 ).attr('src', $('#img_' + r4 ).attr('src')).animate({opacity: 0.75},500).animate({opacity: 1},300);
		$('#img_' + r4 ).attr('src', obmen).animate({opacity: 0.75},500).animate({opacity: 1},300);
	}
	
	setInterval(dynamic_gallery, 4000);	
});
Здесь мы устанавливаем интервал в 4 секунды на выполнение функции - "dynamic_gallery". В этой функции мы обмениваем 4 картинки, с помощью создания четырех случайных чисел:
  1. От 1 до 2
  2. От 3 до 5
  3. От 6 до 8
  4. От 9 до 10
Переменная "obmen" необходима для сохранения ссылки текущей картинки. Для небольшого визуального эффекта используется анимация, которая в течение 500 миллисекунд делает картинку прозрачной на 75 процентов, после чего, уже за 300 мс делает её полностью непрозрачной.
Demo пример Скачать исходники
На этом у меня все, подписывайтесь на обновления, пока!


Раздел: Программирование

Дата последнего изменения: 2015-12-16 20:45:07

Просмотров: 11544

Читайте также:

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Игра «Найди отличия» на JavaScript!
Игра головоломка на JavaScript!

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

* Комментарий: (отменить ответ)

* Ваше имя:

Ваш e-mail:

*