Уголок веб-разработчика

сайт для веб-мастеров и веб-разработчиков


Реклама на сайте
как разместить свою рекламу?



Читайте наш блог!



Программируем слайдер на jQuery. (изменения от 26.11.2013)

Автор: Михаил Пестречихин
Источник: http://www.codething.ru/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.

Хотите дополнить материал? - Пишите нам: studio@pestr.ru

Статьи по теме

AJAX и jQuery. Динамическое обновление контента. Основы;
AJAX и jQuery. Как загрузить скрипт JavaScript динамически?.







Rambler's Top100
© Студия Михаила Пестречихина, 2008-2017
При перепечатке и копировании статей с сайта указание автора и URL статьи обязательно!
Программный код, приведенный в статьях в качестве примеров, можно использовать без каких-либо ограничений.
Работоспособность, надежность и безопасность программного кода из примеров не гарантируется.
Хостинг «Джино»