- → Программирование
- → JavaScript
- → Статьи
Скрипт слайдера картинок: 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, это подвал слайдера, в котором выводятся надписи к картинке. И конечно-же, выложу исходные файлы картинок, необходимые для скрипта слайдера:
Для ясности понимания давайте посмотрим на картинке, как это выглядит, а потом заставим двигаться эти картинки в виде слайдера.
ШАГ 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 будет скриптом, который уменьшает изображение.
Вот и все, надеюсь вам понравился скрипт слайдера картинок для сайта, и у вас появились вопросы ко мне. Задайте их в комментариях, или просто напишите спасибо.
Дальше: Слайдер картинок – метод увеличения конверсии трафика
Development — Taras Moroz