Программируем слайдер на jQuery. (изменения от 26.11.2013)
Автор:
Источник: /jq_slider.php
В статье рассмотрен один из возможных подходов к программированию слайдера с помощью JavaScript и jQuery в виде скроллируемого блока с изображениями и кнопками "влево" и "вправо".
Для корректной работы примера нам потребуется библиотека jQuery и три графических файла с именами pic1.jpg, pic2.jpg, pic3.jpg размером 200x200 px.
Скачать последнюю версию jQuery и подробно ознакомиться со всеми возможностями можно на сайте разработчика: http://www.jquery.com/
Код примера состоит из двух файлов: slider.html и slider.js. В файле slider.html определена HTML-разметка блока со слайдером, содержатся изображения и кнопки прокрутки слайдера. В файле slider.js содержится описание действий, выполняемых при нажатии кнопок "влево" и "вправо".
1. Файл slider.html
<html>
<head>
<style>
#lenta { position: relative; width: 660px; overflow: hidden; }
#slider { margin: 0px; padding: 0px; border-collapse: collapse;}
#slider td { margin: 0px; padding: 0px; }
#cont { position: relative; }
#cont img { padding: 0px; margin-left: 10px; margin-right: 10px; }
</style>
<script src="jquery.js"></script>
</head>
<body>
<table>
<tr>
<td>
<a id='left_btn' style='cursor: pointer;'>влево</a>
</td>
<td valign='top'>
<div id='lenta'>
<div id='cont'>
<table id='slider'>
<tr>
<td>
<img src="pic2.jpg"><br/>
</td>
<td>
<img src="pic1.jpg"><br/>
</td>
<td>
<img src="pic3.jpg"><br/>
</td>
<td>
<img src="pic1.jpg"><br/>
</td>
<td>
<img src="pic2.jpg"><br/>
</td>
<td>
<img src="pic3.jpg"><br/>
</td>
</tr>
</table>
</div>
</div>
</td>
<td>
<a id='right_btn' style='cursor: pointer;'>вправо<br/></a>
</td>
</tr>
</table>
<script src="slider.js"></script>
</body>
</html>
В начале файла определяются стили. Смысл большей части стилей - убрать различные отступы у элементов, т.к. при скроллировании слайдера применяются арифметические расчеты с использованием ширины объектов и важно, чтобы элементы не имели отклонений по ширине от заданных вручную, в противном случае при скроллировании могут возникать непредсказуемые смещения и другие ошибки.
Структура слайдера предствляет из себя 3 вложенных друг в друга объекта: lenta, cont и slider.
Объект lenta определеяет видимую область слайдера, в примере мы ограничиваем его 660 px по ширине (этого как раз хватит на 3 изображения 200x200 px с заданными отступами).
Объект cont определяет содержимое слайдера, он свободно перемещается внутри объекта lenta по горизонтали, создавая визуальный эффект прокрутки.
Объект slider содержит в себе таблицу с изображениями показываемыми в слайдере. В данном примере без таблицы никак не обойтись, иначе изображения начинают выстраиваться не только по горизонтали, но и вертикали, что противоречит идее слайдера.
Помимо слайдера в разметке определены кнопки left_btn ("влево") и right_btn ("вправо"), для прокрутки слайдера в соответствующих направлениях.
Обработчик событий от кнопок храниться в файле slider.js.
2. Файл slider.js
on_screen_pic = 3;
slider_diff = 220;
$("#left_btn").click(function(){
var x=$("#cont").position();
if (x.left<=0)
{
newcoord=(x.left+slider_diff);
if (newcoord>=0)
newcoord=0;
$("#cont").animate({left: newcoord+"px"},150);
}
});
$("#right_btn").mousedown(function(){
var x=$("#cont").position();
if (Math.abs(x.left)+slider_diff*on_screen_pic<$("#slider").width())
{
newcoord=(x.left-slider_diff);
if (Math.abs(newcoord)+slider_diff>=$("#slider").width())
newcoord=-$("#slider").width()+slider_diff;
$("#cont").animate({left: newcoord+"px"},150);
}
});
В начале файла slider.js используются настройки:
on_screen_pic - количество изображений в видимой части слайдера;
slider_diff - смещение в px, на которое прокручивается слайдер при нажатии на кнопку (должно быть обязательно равно сумме ширины изображения и отступов);
В файле slider.js применяется элементарная арифметика. Алгоритм работы каждой кнопки следующий:
1. Определяем, можем ли мы еще сдвинуть слайдер в указанном направлении не упершись в край;
2. Если можем, то сдвигаем слайдер, иначе оставляем положение без изменения.
Скачать:
jq_slider.zip - пример программы, реализующей слайдер на jQuery и JavaScript.
Хотите дополнить материал? - Пишите нам:
Статьи по теме
AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?.
|
