Войти Регистрация

Скрипт слайдера картинок: JS + HTML + CSS


Скрипт слайдера картинок для сайтаВ связи с большим весом библиотеки jQuery (около 80kb), нет смысла ее использовать только ради некоторых функций. К тому же, такой вес значительно тормозит загрузку сайта. Хочется, чтобы сайт был быстрым и красочным, поэтому было решено написать собственный скрипт слайдера картинок для сайта, без использования jQuery.

Сегодня мы научимся создавать слайдер картинок для вашего сайта, который будет компактным, быстрым и надежным. Весить такой скрипт будет около 2kb (JavaScript код). Разрешение слайдера будет 380 x 240. При желании вы сможете поменять на свое. Этот скрипт тестировался на кроссбраузерность в: IE, FireFox, Chrome, Opera.

Пример скрипта

Данный скрипт разрабатывался специально для сайта passionlady.ru, на котором вы сможете увидеть скрипт в работе.

Приступим к написанию.

ШАГ 1 – Верстка слайдера HTML + CSS

Мы будем писать скрипт, как отдельный пример. Думаю, прикрутить его к вашей БД и структуре сайта будет не сложно.

В отдельной папке создайте HTML файл с произвольным именем, например slider.html, и поместите в него следующий код:

<div id="slider">

<div class="thumb" style="display:none; background: url(img-1.jpg) no-repeat center top; height:240px; width:380px;" id="1">

<div class="bottom">

<a href="">Надпись на картинке, или ссылка</a>

</div>

</div>

 

<div class="thumb" style="display:none; background: url(img-2.jpg) no-repeat center top; height:240px; width:380px;" id="2">

<div class="bottom">

<a href="">Подпись следующей картинки</a>

</div>

</div>

 

<div class="thumb" style="display:none; background: url(img-3.jpg) no-repeat center top; height:240px; width:380px;" id="3">

<div class="bottom">

<a href="">Это простой слайдер картинок</a>

</div>

</div>

 

<div class="thumb" style="display:none; background: url(img-4.jpg) no-repeat center top; height:240px; width:380px;" id="4">

<div class="bottom">

<a href="">Спасибо авторам сайта SiteAR.RU! </a>

</div>

</div>

 

<div class="thumb" style="display:none; background: url(img-5.jpg) no-repeat center top; height:240px; width:380px;" id="5">

<div class="bottom">

<a href="">Последняя картинка в слайдере!</a>

</div>

</div>

 

</div>

Надеюсь с HTML кодом, проблем не возникнет. Единственное, как видите, некоторые стили вынесены прямо в блок (display:none; background: url(img-5.jpg) no-repeat center top;). Такая процедура необходима, при формировании блоков из базы данных, где background-image, будет браться из базы данных. По поводу display:none, он также обязателен, без него блоки не смогут появляться, а потом исчезать.

Давайте посмотрим на CSS код, вы можете добавить его к этому файлу или вынести в отдельный css файл:

#slider .thumb{position:absolute;}

#slider a{color:#FF9;}

#slider a:hover{color:#cc151e;}

#slider .thumb .bottom{position:absolute; top:202px; padding:15px; max-height:10px; min-height:10px; width:350px; background: url(s_bottom.png) repeat-x bottom;}

Стоит приметить, что у всех блоков с классом thumb, стоит атрибут position:absolute, который позволяет накладываться всем блокам на одно и то же место. Такой же атрибут используется для класса bottom, это подвал слайдера, в котором выводятся надписи к картинке. И конечно-же, выложу исходные файлы картинок, необходимые для скрипта слайдера:

Фон на низ слайдера

Картинка для слайдера 1

Картинка для слайдера 2

Картинка для слайдера 3

Картинка для слайдера 4

Картинка для слайдера 5

Для ясности понимания давайте посмотрим на картинке, как это выглядит, а потом заставим двигаться эти картинки в виде слайдера.

Схема слайдера картинок для сайта

ШАГ 2 – JS

На этом этапе мы создадим сердце слайдера картинок, а именно javascript функции, которые будут управлять перелистыванием картинок. Для этого создайте отдельный js файл, например slider.js, подключите его к html файлу (slider.html), и поместите в него следующий код:

function toggle(id)
{
	var e = document.getElementById(id);
	var dh = gh(id);
	var elems = e.getElementsByTagName('*');
	var flag;
	
	if (e.style.display == "none")
	{
		if (flag != 0)
		{
			flag = 0;
			for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
		
			e.style.height="1px";
			e.style.display = "block";
			for(var i=0;i<=100;i+=5)
			{
				(function()
					{
						var pos=i;
						setTimeout(function(){e.style.height = (pos/100)*dh+1+"px";},pos*5);
					}
				)();
			}
			setTimeout(function(){for(var i=0; i<elems.length; i++){elems[i].style.visibility="visible";}},500);
			return true;
			flag = 1;
		}
	}
	else
	{
		if (flag != 0)
		{
			flag = 0;
			var lh=dh-1+"px";
			
			for(var i=0; i<elems.length; i++){vhe(elems[i], "hidden");}
			
			for (var i=100;i>=0;i-=5)
			{
				(function()
					{
						var pos=i;
						setTimeout(function()
						{
							e.style.height = (pos/100)*dh+"px";
							if (pos<=0)
							{
								e.style.display = "none";
								e.style.height=lh;
							}
						},1000-(pos*5));
					}
				)();
			}
			return true;
			flag = 1;
		}
	}
	return false;
}

function vhe(obj, vh){obj.style.visibility=vh;}

function gh(id)
{
	var e = document.getElementById(id);
	if(e.style.display == "none")
	{
		e.style.visibility = "hidden";
		e.style.display = "block";
		dh = e.clientHeight||e.offsetHeight+5; // Высота
		e.style.display = "none";
		e.style.visibility = "visible";
	}
	else
	{
		dh = e.clientHeight||e.offsetHeight+5; // Высота
	}
	return dh;
}

function slider(now, last)
{
	var newnow;
	
	if(now==1){newnow=2;}
	if(now==2){newnow=3;}
	if(now==3){newnow=4;}
	if(now==4){newnow=5;}
	if(now==5){newnow=1;}
	
	if(last!=0){toggle(last);}
	
	setTimeout(function(){toggle(now);},1000);
	
	setTimeout(function(){slider(newnow, now);}, 6000);
}

window.onload = run_function;

function run_function()
{
	slider('1', '0');
}

Разберем все по функциям:

toggle – это функция отвечающая за эффект сворачивания и разворачивания, детально мы ее рассматривать не будем, так как это не столь важно. Она принимает единственный аргумент – id html элемента. Если элемент (блок), был раскрыт, выполняется его сворачивание. Если блок невидим (свернут), выполняется разворачивание.

Вы можете использовать любой другой эффект, это уже дело вашего мастерства.

vhe, gh – это функции которые используются, функцией toggle. Первая (vhe) отвечает за прозрачность объектов. Вторая (gh) – вычисляет высоту блока, это необходимо для плавного сворачивания/разворачивания.

slider – отвечает за перелистывание картинок. Получает 2 аргумента (now, last). Now – это id блока (картинки), который необходимо показать. Last – это id блока (картинки), который нужно спрятать. Изначально функция запускается автоматически, при этом last аргумент равен 0, то есть прежний блок картинки не сворачивается.

По ходу функции вычисляются следующие значения now и last, которые замкнуты в цикл, и через некоторое время (setTimeout), функция вызывает сама себя заново. Все предельно просто.

run_function – это функция, которая будет вызываться при загрузке страницы (onload функция). В ней мы вызываем функцию slider, которая в дальнейшем вызывает сама себя. Вот и вся автоматика.

Как установить этот скрипт?

Важно понимать, что это не отдельный плагин. Это пример реализации скрипта слайдера картинок, который необходимо самостоятельно вмонтировать в структуру вашего сайта. Вы также можете изменять данный код под свое усмотрение.

Итак, как я (автор скрипта), вмонтировал его в PHP структуру сайта?

<? $num=1; if(!empty($contents)): ?> 

<div id="slider">

                               <? foreach($contents as $item): ?>

                                               <div class="thumb" style="display:none; background: url(адрес фона, начиная с http://) no-repeat center top; height:240px; width:380px;" id="<?=$num;?>">

                                                               <div class="bottom">

                                                                              <a href="http://url_to_article">

                                                                                              Имя статьи или материала

                                                                              </a>

                                                               </div>

                                               </div>

                               <? $num++; endforeach; ?>

</div>

<? endif; ?>

Сначала я выбираю mysql запросом, последние 5 материалов из БД, или самые популярные. Это дело личное, как того требует «Фен-Шуй».

Записываю эти статьи в многомерный массив, например $contents.

Содержимые элементы массива ($item) должны содержать следующие данные:

URL картинки (адрес фоновой картинки, желательно с http://domain..., если не хотите проблем).

URL материала (не обязательно url, можно какой-то идентификатор статьи, по которому вы формируете url на нее).

Название материала (title вашего материала, которое будет ссылкой).

Доработка скрипта

Не всегда картинки, которые будут показываться в слайдере, будут размером 380 X 240. Не стоит их подгонять в фотошопе, или создавать отдельные.

Есть простой выход из ситуации, вы можете автоматически уменьшить картинку. В той статье описано, как можно генерировать на лету превью картинок. Нужно будет подать URL картинки в таком виде http://sliderpicture.php?src=http://адрес-картинки&width=380&height=240, где sliderpicture.php будет скриптом, который уменьшает изображение.

Вот и все, надеюсь вам понравился скрипт слайдера картинок для сайта, и у вас появились вопросы ко мне. Задайте их в комментариях, или просто напишите спасибо. 



Дальше: Слайдер картинок – метод увеличения конверсии трафика


Дискуссия по теме    13 Комментариев
Добавить комментарий
Vitaliy 11.10.2017 ? 22:13
А как эта штука может конфликтовать с виджетом колл-бэка? виджет- одна строчка ява скрипта- никаких переменных и вообще ничего общего с этим слайдером не имеет, но при добавлении виджета слайды пропадают. http://профф-отделка.рф
Комментарий ожидает проверки администратора
junior 25.09.2017 ? 21:11
дааа такого говно кода на js я еще не видел
Комментарий ожидает проверки администратора
Владислав 04.12.2014 в 18:53
Спасибо! :)
Val 22.10.2014 в 18:33
Здравствуйте! Воспользовался Вашим скриптом для установки слайдера на страницу. Спасибо большое за хорошо поданную информацию! Вопрос у меня в следующем. Подскажите, пожалуйста, как сделать чтобы следующая картинка выезжала сбоку и вытесняла предыдущую. Please!!!
Анатолий 22.10.2014 в 14:18
Кажется сайт-пример увели. Нельзя ли куда-то выложить результат работы скрипта, чтобы было наглядно видно, что получилось?
dst 03.12.2013 в 17:31
Скажите пожалуйста, как сделать кнопку для принудительного переключения на следующий слайд? И, спасибо огромное за статью. Я как раз замучался со сторонними слайдерами, хотел было js уже начать учить )) и тут обнаружил ваш сайт. Очень полезно.
Тарас 04.12.2013 в 04:18
Можно так: <div onclick="slider('1', '0');">1 слайд</div> <div onclick="slider('2', '1');">2 слайд</div> <div onclick="slider('3', '2');">3 слайд</div> <div onclick="slider('4', '3');">4 слайд</div> <div onclick="slider('5', '4');">5 слайд</div> только может глючить... это весь скрипт надо переделывать. Проще на jquery писать, сейчас на нем почти весь интеркатив сайтов сделан.
Дмитрий 10.04.2013 в 14:03
а как это все будет работать на девайсайх с тач-скрином?
Тарас 18.04.2013 в 11:56
Для тач-скринов лучше найти слайдер где используется библиотека jquery mobile.
Evgeniy 25.02.2013 в 01:17
Vse rabotaet !!!! Spasibo !!!!
Александр 23.12.2012 в 09:50
На второй день, на свежую голову вроде сам разобрался. P.S. Спасибо за отклик Тарасу
Александр 22.12.2012 в 15:21
Взял ваш скрипт, вставил HTML файл между <body></body>, и в этом же файле между <style></style> вставил CSS код. В папку images закинул фото, в "урл" указал направление: url(images/img-1.jpg.) Также сделал: отдельный js файл (просто скопировал ваш). Открываю - браузер "пустой". Подскажите пожалуйста где ошибка? P.S. у меня простой обычный сайт без PHP. Заранее спасибо.
Тарас 23.12.2012 в 02:50
Есть ссылка на эту страницу?
Добавить комментарий
Просмотров: 71785