Скрипт слайдера картинок: JS + HTML + CSS
В связи с большим весом библиотеки jQuery (около 80kb), нет смысла ее использовать только ради некоторых функций. К тому же, такой вес значительно тормозит загрузку сайта. Хочется, чтобы сайт был быстрым и красочным, поэтому было решено написать собственный скрипт слайдера картинок для сайта, без использования jQuery.
Сегодня мы научимся создавать слайдер картинок для вашего сайта, который будет компактным, быстрым и надежным. Весить такой скрипт будет около 2kb (JavaScript код). Разрешение слайдера будет 380 x 240. При желании вы сможете поменять на свое. Этот скрипт тестировался на кроссбраузерность в: IE, FireFox, Chrome, Opera.
Пример скрипта
Данный скрипт разрабатывался специально для сайта passionlady.ru, на котором вы сможете увидеть скрипт в работе.
Приступим к написанию.
ШАГ 1 – Верстка слайдера HTML + CSS
Мы будем писать скрипт, как отдельный пример. Думаю, прикрутить его к вашей БД и структуре сайта будет не сложно.
В отдельной папке создайте HTML файл с произвольным именем, напримерslider.html, и поместите в него следующий код:
Надеюсь с HTML кодом, проблем не возникнет. Единственное, как видите, некоторые стили вынесены прямо в блок (display:none; background: url(img-5.jpg) no-repeat center top;). Такая процедура необходима, при формировании блоков из базы данных, где background-image, будет браться из базы данных. По поводу display:none, он также обязателен, без него блоки не смогут появляться, а потом исчезать.
Давайте посмотрим на CSS код, вы можете добавить его к этому файлу или вынести в отдельный css файл:
Стоит приметить, что у всех блоков с классом thumb, стоит атрибут position:absolute, который позволяет накладываться всем блокам на одно и то же место. Такой же атрибут используется для класса bottom, это подвал слайдера, в котором выводятся надписи к картинке.
