Автор: mike
7 февраля 2013 года
Последнее время большую популярность приобрели движущиеся горизонтальные панели, известные также как «Слайдеры» или «Карусели». Оно и понятно, это простой и очень эффективный метод привлечь внимание пользователя. Слайдеры позволяют активнее влиять на поведение пользователей на сайте и продвигать необходимые материалы.
На сегодняшний день существуют сотни, если не тысячи готовых скриптов и модулей для организации слайдера. Вы можете вбить в Google строку «JQuery slider» и найдете десятки обзоров с ссылками на сотни готовых модулей «слайдеров» и «каруселей».
Основная проблема всех готовых модулей — универсальность, громоздкость и, иногда, сложность настройки. Создать слайдер с нуля, иногда, проще чем настроить готовый модуль, ибо простой слайдер — это лишь пара строк кода на JavaScript.
В этой небольшой заметке я покажу как с нуля создать свой слайдер.
С точки зрения HTML верстки слайдер состоит из двух основных частей — «окна» отображения (viewport) и основного содержимого, состоящего из нескольких слайдов. Ширина одного слайда обычно равна ширине окна отображения. Остальные слайды, не влазят в окно отображения просто не видны.
Ниже приведен пример самого простого слайдера с описанием в комментариях.
Код:
<!— Таблица стилей для элементов слайдера —>
<styletype=»text/css»>
/* Основной контейнер для всех элементов слайдера. Его размеры 640×400*/
#slider {width:638px;height:400px;}
/* Фиксированный контейнер прокручиваемых элементов слайдера */
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}
/* Плавающий контейнер прокручиваемых элементов слайдера. Ширина задается в свойстве style. */
#slider_moving_container {position:absolute;left:0px;}
/* Элемент слайдера. В этом примере можно было бы просто использовать изображение, но мы то пойдем дальше */
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}
</style>
<!— HTML верстка слайдера —>
<!— Основной контейнер —>
<divid=»slider»>
<!— Фиксированный контейнер —>
<divid=»slider_container»>
<!— Плавающий контейнер —>
<divid=»slider_moving_container»>
<!— Слайд №1. Вместо div можно было бы использовать просто изображение, но в слайды нужно будет вставить текст. —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/WEB-Development/HTML/’;»id=»slider_1″style=»left:0;background-image: url(‘/np-includes/upload/2013/02/06/131036_original.jpg’);»>
</div>
<!— Слайд №2 —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/Languages/PHP/’;»id=»slider_2″style=»left:640px;background-image: url(‘/np-includes/upload/2013/02/06/131037_original.jpg’);»>
</div>
<!— Слайд №3 —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/Languages/JavaScript/’;»id=»slider_3″style=»left:1280px;background-image: url(‘/np-includes/upload/2013/02/06/131038_original.jpg’);»>
</div>
</div>
</div>
</div>
</body>
</html>
HTML код отобразит слайдер, но этого мало. Слайды должны автоматические меняться через некоторое время. Эта небольшая программа на JavaScript раз в 10 секунд меняет слайдер на очередной.
Код:
var slider_position=1; // Номер текущего слайда
var slider_total=3;// Общее количество слайдов
function slider_auto_run(){
setTimeout(function(){
// Переход к следующему слайду
slider_position++;
// Переход от последнего к первому слайду
if(slider_position>slider_total) slider_position=1;
// Сдвиг слайда и анимация с помощью JQuery animate()
$(‘#slider_moving_container’).animate({left:-((slider_position-1)*640)+’px’});
// Повтор
slider_auto_run();
},10000);/* Каждый 10 секунд */
};
slider_auto_run();
Результат работы примера можно посмотреть на демо-странице.
Чтобы слайдер имел законченный вид, его необходимо снабдить элементами навигации и добавить подписи к слайдам.
Код:
<!— Таблица стилей —>
<styletype=»text/css»>
<!— Общие стили слайдера (см. первый пример —>
#slider {width:638px;height:500px;}
#slider_container {width:638px;height:500px;position:absolute;overflow:hidden;}
#slider_moving_container {position:absolute;left:0px;}
.slider_element {cursor:pointer;width:640px;height:500px;position:absolute;}
<!— Стили для стрелок навигации вправо и влево —>
#slider_right {width:25px;height:51px;display:block;background-image: url(‘/np-includes/upload/2013/02/06/131040.png’);float:right;margin:265px 0 0 615px;position:absolute;}
#slider_left {width:25px;height:51px;display:block;background-image: url(‘/np-includes/upload/2013/02/06/131039.png’);float:left;margin-top:265px;position:absolute;}
<!— Стили для текстов подписей —>
#slider_info {background:#333;height:132px;width:596px;display:block;padding:22px 32px 0 32px;margin-top:346px;}
#slider_title {font-family:times; font-size:30px;color: #ffc;text-decoration:none;display:block;margin:0;}
#slider_description {font-size:12px;color:white;text-decoration:none;display:block;margin:7px 0 0 0;}
#slider_hint {font-size:11px;color:#ccc;margin:2px 0 0 0;}
</style>
</head>
<bodystyle=»font-family:arial;font-size:12px;»>
<divid=»slider»>
<divid=»slider_container»>
<divid=»slider_moving_container»>
<!— Слайд №1 —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/WEB-Development/HTML/’;»id=»slider_1″style=»left:0;background-image: url(‘/np-includes/upload/2013/02/06/131036_original.jpg’);»>
<!— Текст подписи слайда —>
<divid=»slider_info»>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_title»>Невский Экспресс</a>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_description»>Электровоз ЧС200-004 с поездом «Невский Экспресс». Станция Рябово. Скорость 160 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!— Слайд №2 —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/Languages/PHP/’;»id=»slider_2″style=»left:640px;background-image: url(‘/np-includes/upload/2013/02/06/131037_original.jpg’);»>
<!— Текст подписи слайда —>
<divid=»slider_info»>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_title»>Санкт-Петербург — Брянск</a>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_description»>Электровоз ЧС2Т-1026 с поездом Санкт-Петербург — Брянск. Перегон Чудово-Московское — Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
<!— Слайд №3 —>
<divclass=»slider_element»onclick=»location.href=’http://www.codenet.ru/cat/Languages/JavaScript/’;»id=»slider_3″style=»left:1280px;background-image: url(‘/np-includes/upload/2013/02/06/131038_original.jpg’);»>
<!— Текст подписи слайда —>
<divid=»slider_info»>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_title»>»Сапсан»</a>
<ahref=»http://www.codenet.ru/cat/WEB-Development/HTML/»id=»slider_description»>Электропоезд ЭВС1-005 «Сапсан» и электровоз ЧС2Т-1014 с поездом Санкт-Петербург — Ижевск. Перегон Чудово-Московское — Гряды. В районе платформы Дубцы. Скорость 100 км/ч. Февраль 2013 года.</a>
</div>
</div>
</div>
</div>
<!— Элементы навигации по слайдам —>
<ahref=»#»id=»slider_right»></a>
<ahref=»#»id=»slider_left»></a>
</div>
Код автоматической смены слайдов немного изменился из-за реализации ручного управления (стрелки «влево» и «вправо»). Если пользователь по клику сменил слайд, то автоматическая смена слайдов выключается.
Код:
var slider_position=1; // Номер текущего слайда
var slider_total=3;// Общее количество слайдов
var slider_auto=true; // Автоматическая смена слайдов — true, ручная смена слайдов — false
// Обработчик клика по навигационной стрелке «вправо».
$(‘#slider_right’).click(function(){
// Выключение автоматической смена слайдов
slider_auto=false;
// Переход к следующему слайду
slider_position++;
// Переход к первому слайду, если слайды закончились
if(slider_position>slider_total) slider_position=1;
// Смена слайда с анимацией
$(‘#slider_moving_container’).animate({left:-((slider_position-1)*640)+’px’});
returnfalse;
});
$(‘#slider_left’).click(function(){
// Выключение автоматической смена слайдов
slider_auto=false;
// Переход к предыдущему слайду
slider_position—;
// Переход к последнему слайду, если необходимо
if(slider_position<1) slider_position=slider_total;
// Смена слайда с анимацией
$(‘#slider_moving_container’).animate({left:-((slider_position-1)*640)+’px’});
returnfalse;
});
// Автоматическая смена слайдов. См. предыдущий пример.
function slider_auto_run(){
setTimeout(function(){
// Если включено ручное управление слайдами, то ничего не делать
if(!slider_auto)return;
slider_position++;
if(slider_position>slider_total) slider_position=1;
$(‘#slider_moving_container’).animate({left:-((slider_position-1)*640)+’px’});
slider_auto_run();
},10000);
};
slider_auto_run();
Результат работы примера можно посмотреть на демо-странице.
Источник: http://feedproxy.google.com/~r/codenet/read/~3/JlCvQeIOLaA/
Источник: