Как сделать динамическую галерею из плиток на 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

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

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

Игра Угадай число на JavaScript!
Html таблица на JavaScript
Сортировка пузырьком на JavaScript
Движущаяся машина на JavaScript!
Видео галерея на JavaScript!
Падающий мяч на JavaScript!
Генератор случайных картинок на JavaScript!
Как изменить фон страницы на JavaScript

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

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

* Ваше имя:

Ваш e-mail:

*