Я что-то плохонепонял

Сегодня сделал свой первый слайдер и мне очень понравилось. Решил написать об этом у себя в блоге, да и давно уже ничего тут не писал. Во время рассказа я буду ориентироваться на то, что читатель уже знаком с базовыми знаниями html, css и js, потому что статья планируется огромная и не хочется тратить время на вскрытие прочих мелочей типа как подключить файл стилей или почему у меня див не флотится.

Что должен уметь слайдер.

Для начала необходимо описать возможности. Представим, что мы зашли на сайт, увидели какие-то картинки и по краям кнопки вперед и назад. Нажали, картинки поменялись. Пролистали до последней картинки и кнопка больше не работает. Зато теперь можно отлистать назад. Вот такой и нам нужен.

Из чего состоит слайдер.

Наш слайдер будет состоять из двух больших контейнеров, вложенных друг в друга. При чем контейнер, который будет внутри, он окажется больше по ширине и его мы будем передвигать. Возможно это будет сложно вообразить, поэтому я нарисовал макет, который поможет представить конструкцию.

На рисунке видны два больших контейнера и пять маленьких. Красный большой контейнер у нас статичен — это и есть окно слайдера. В синем контейнере находятся слайды. А сам синий находится в красном контейнере.

Все, что выходит за рамки красного контейнера, пользователям не будет видно. На данный момент они будут видеть только второй и третий слайды, и немножко четвертого, что бы уведомить о наличии картинок. По краям красного контейнера необходимо поставить кнопки навигации. Нажимая на соответствующую кнопку, синий контейнер будет передвигаться на заданное расстояние и в окошке мы будем наблюдать другие картинки.

А теперь начнем разбирать исходный код, с помощью которого нам необходимо сделать наш слайдер. Для начала надо набросать голый html, потом поработать стилями и упорядочить наши блоки_контейнеры. А на десерт расколупаем яваскрипт в связке с библиотекой jQuery.

HTML:

<div class="slider">
<div class="prew"><</div>
<div class="next">></div>
<div class="items">
<div class="cnt">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
</div>

Надеюсь понятно, что в красный блок items мы вложили синий cnt, а в него накидали пять блоков с классом item. На всякий случай надо обернуть все это дело блоком slider, я потом расскажу почему без него будет хуже. А еще, забыл совсем. Тут еще надо добавить навигационные кнопки. Ну видно где я их добавил.

Теперь создаем файл style.css и правилами описываем наши блоки. Кому и как правильно необходимо жить на этой странице. Правильно им жить надо вот так:

1. Красный с фиксированной шириной и не должен показывать то, что выходит у него за рамки. То есть ему надо скрыть значительную часть синего блока и слайдов, которые не попали в экран.
2. Синему блоку надо всего лишь указать одно правило. Я покажу в файле стилей.
3. Зеленым блокам надо сказать, что все они одинаковой ширины и должны прижаться друг к другу с левой стороны.

Для наглядности на время тестирования закрасим блоки и сделаем бордюры и прочего всего, чтоб мозг понимал как происходит слайдинг.

А код css получается следующий:

.slider {position:relative; border:1px solid #000;}
.prew {position:absolute; top:17px; left:0px; padding:2px; color:#fff; background-color:#000;}
.next {position:absolute; top:17px; right:0px; padding:2px; color:#fff; background-color:#000;}
.items { margin:0 auto; width:150px; border:1px solid red;}
.cnt {position:relative; width:300px; height:50px; border:1px solid blue;}
.item {float:left; margin:0 2px; width:50px; height:50px; background-color:green;}

В данных правилах написано немного лишнего и совсем чуточку не хватает нужного кода. Это я сделал для теста и наглядности. Делайте все точно так же.

Все, пол дела сделано и болванка слайдера подготовлена. После сборки тщательно обработать напильником

Теперь берем аниматор слайдомета и сохраняем у себя где-нибудь возле рабочих файлов. Лучше всего создать файл jquery-1.6.2.min.js и потом подключить его на страницу таким вот образом:

<script src=«/jquery-1.6.2.min.js» type=«text/javascript»></script>

Подразумевается, что файл лежит рядом с индексным.

Если все получилось, то переходим к созданию js-сценария, который будет отвечать за пролистывание слайдов и анимацию в нужную сторону, а так же проверку... там несколько проверок будет.

Добавляйте на страницу, перед тегом </head> это:

<script type="text/javascript">
//<!--

//-->
</script>

И теперь между ними будем набирать нужные строки для корректной работы слайдера. Для начала туда надо записать функцию, которая подготовит работу после загрузки страницы. Как-то так это называется. Короче теперь между тегами скрипта надо записать вот это:

$(document).ready (function (){

});

Ну а потом будем все строительные работы проводить внутри этой функции. Теперь самое интересное. Что бы программно задать ширину синему блоку, надо посчитать количество слайдов. найти ширину слайда и добавить к ней расстояние левого и правого поля. Потом полученное значение (полная ширина слайда) надо умножить на количество слайдов и получим ширину синего блока.

Запишем все необходимые значения в переменные.

// получаем ширину 250px, функция parseInt отсекает буквы и отдает только цифры
var w = parseInt ($(«.item»).css ('width')); // ширина слайда
var pl = parseInt ($(«.item»).css ('padding-left')); // левый паддинг
var pr = parseInt ($(«.item»).css ('padding-right')); // правый паддинг
var w_item = w+pl+pr; // фактическая ширина итема
var w_cnt = ($(«.item»).length); // количество итемов
var allw = w_cnt*w_item // ширина синего блока
$(«.items .cnt»).css ('width', allw); // назначаем ширину синему блоку

Как только мы получили все необходимые цифры, пришла мысль о том, как нам проконтролировать бешеный слайдер. чтоб он бесконечно не перелистывал, а остановился на последнем слайде. Это просто. Создаем переменную position и дописываем ее после всех наших переменных со значением ноль. Потому что после загрузки страницы слайдер будет находиться в положении «на старт».

Вот что надо записать: var position = 0; // позиция слайдера

И еще: var num_slide = 2; // сколько слайдов на экране

Теперь принимаемся за кнопочки. Определяем действия для левой кнопки после клика по ней. Ну надо сдвинуть синий блок в левую сторону, при чем, если еще есть слайды с правой стороны, которые не видны пользователю. А если слайдов нет, то никуда ничего не двигаем.

Код вот такой:

if (position > ((0-w_cnt)+num_slide)){ // если справа еще есть слайды
d_slide.animate ({ // синему блоку придаем анимацию
left: '-='+w_item // сдвигаем влево на ширину одного слайда
}, 500 ); // задержка м миллисекундах (500 это полсекунды)
— position; // вычитаем из position единицу (одинсдвиг в лево)

}
});

Условие тяжело для понимания, но я постараюсь написать как оно получилось. Если переменная position больше, чем ... ох-ох (тут мы отнимаем от ноля количество итемов и прибавляем, количество слайдов, которые постоянно видны в экране). Вот если position больше, чем вся эта конструкция. значит двигаемся влево. Да это вообще и знать не надо наверно, работает и ладно.

В правой кнопке все просто, только условие другое и намного понятней:

$(«.prew»).click (function (){

if (position < 0){
d_slide.animate ({
left: '+='+w_item
}, 500 );
++position;

}
});

Этот код описывать не хочу. Тут просто и можно догадаться самому. Уже пять утра, поэтому не хочу. Он очень схож с предыдущим блоком кода, только для другой кнопки и выполняет противоположные действия.

Итого у нас получилось вот столько строк полного кода:

<script type="text/javascript">
//<!--

$(document).ready (function (){

// получаем ширину 250px, функция parseInt отсекает буквы и отдает только цифры
var w = parseInt ($(«.item»).css ('width')); // ширина слайда
var pl = parseInt ($(«.item»).css ('padding-left')); // левый паддинг
var pr = parseInt ($(«.item»).css ('padding-right')); // правый паддинг
var w_item = w+pl+pr; // фактическая ширина итема
var w_cnt = ($(«.item»).length); // количество итемов
var allw = w_cnt*w_item // ширина синего блока
$(«.items .cnt»).css ('width', allw); // назначаем ширину синему блоку
var position = 0; // позиция слайдера
var num_slide = 2; // сколько слайдов на экране
var d_slide = $(«.cnt»); // адресация к синему блоку для удобства

if (position > ((0-w_cnt)+num_slide)){ // если справа еще есть слайды
d_slide.animate ({ // синему блоку придаем анимацию
left: '-='+w_item // сдвигаем влево на ширину одного слайда
}, 500 ); // задержка м миллисекундах (500 это полсекунды)
— position; // вычитаем из position единицу (одинсдвиг в лево)
}
});

$(«.prew»).click (function (){
if (position < 0){
d_slide.animate ({
left: '+='+w_item
}, 500 );
++position;
}
});
});

//-->
</script>

По идее должно все работать. Я короче устал писать. НИ разу такие большие статьи не писал. Вот ссылка на полурабочий слайдер, на примере которого я написал эту статью. Там хорошо виден весь процесс. А так же есть исходный код для раздумий. Я пошел спать...