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

загруженное (4)

В связи с большим весом библиотеки 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, это подвал слайдера, в котором выводятся надписи к картинке.

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*


*

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>