Эффект фото ленты 2 (html версия)

Здравствуйте Уважаемые читатели!
Вот и настал тот долгожданный момент выхода второй версии фото ленты. Скрипт писался около месяца, т.к. хотелось написать максимум, оптимизированный код и удобный для понимания и применения. Его можно скачать с нашего сайта http://fuzaylov.net/hr/HR_PhotoLine.rar
Приступим!
Первое, что хочется выделить, это разница между этой версией и предыдущей, то это реальное существование ленты состоящей и фотографий и которые реально прокручиваются, а не эмуляция эффекта прокрутки, как было в предыдущей версии. Первая задача, что стояла передо мной, это выстроить такую ленту на div-ах через html. Сначала мне казалось, что тут нужно манипулировать слоями, т.е. имеется два слоя один на другом. Верхний слой имеет прозрачную область по середине и не прозрачную по краями. А нижний слой это div c выстроенными рисунками и мне казалось, что просто надо будет каким-нибудь образом смещать горизонтальное положение нижнего div-а и таким образом добиться эффекта прокрутки. Долгое время я экспериментировал со слоями, но нечего так и не добился и понял, что это не так! Потом в голову пришла другая идея, что тут достаточно одного лишь слоя, а рисунки надо смещать с помщью margin-а. Но сразу нечего не получилось, т.к. я забыл о свойстве стиля overflow со значением hidden, который скрывает все дочерние элементы, оказавшиеся за пределами родительского элемента (далее на примере все будет понятно). Применив его, я получил первый положительный результат. Далее, перебирая разные варианты, я добился желаемого эффекта. Ниже приверед html код, того, что я получил в результате.

<div style="width:522px; overflow:hidden; border:1px solid #000000; background-color:#FFFFCC;">
<img src="1.jpg" border="0" width="250" style="padding:5px;"><img src="2.jpg" border="0" width="250" style="padding:5px;"><img src="3.jpg" border="0" width="250" style="padding:5px; margin-right:-260px;"><img src="4.jpg" border="0" width="250" style="padding:5px; margin-right:-260px;">
</div>

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

<div style="width:522px; overflow:hidden; border:1px solid #000000; background-color:#FFFFCC;">
<img src="1.jpg" border="0" width="250" style="padding:5px;">
<img src="2.jpg" border="0" width="250" style="padding:5px;">
<img src="3.jpg" border="0" width="250" style="padding:5px; margin-right:-260px;">
<img src="4.jpg" border="0" width="250" style="padding:5px; margin-right:-260px;">
</div>

Все это работает следующим образом. Начнем с главного, родительского div-а. Поначалу я думал, что ширину div-а можно выставить как сумму ширины отображаемых в ленте рисунков. В нашем случае два рисунка по 250 пикселей. Но этого оказалось не достаточно, т.к. если имеется padding у рисунков и border у div-а, то их тоже следует учитывать, а в противном случае рисунки будут падать вниз. Поэтому я выставил ширину равной 522 пикселя, это 250+250+5+5+5+5+2=522. Далее рассмотрим два рисунка, которые имеют свойство margin-right равным -260px. Почему же именно -260? Свойство margin создает расстояние между внешней границей самого элемента с внутренней границей его родительского элемента. Если последний рисунок внутри div-а имеет свойство margin-right равным 10px, то расстояние между правой границей рисунка и правой границей div-а будет равным 10 пикселям. Если margin-right равно нулю, то рисунок плотно прилегает к правой границе div-а. А если установить минусовое значение, то рисунок уже уйдет за правую границу дива, а overflow обеспечит его невидимость. Значение нужно установить -260, т.к. нужно учитывать padding тоже, т.е. -250-5-5=-260. Вроде создать мы создали нашу неподвижную ленту, а теперь нужно обеспечить ее прокручивание. Этот момент реализовать уже не сложно. Представим, что пользователь кликнул по стрелке в левую сторону, у нас первый рисунок должен уйти за левую границу div-а, а третий рисунок должен выползти из правой границы. Значит нам следует просто установить margin-left первого рисунка -260px и он уйдет за левую границу дива, а установив margin-right равным 0px у третьего рисунка мы его вставляем на место и таким образом мы получаем эффект прокрутки. А если пользователь кликнул еще раз по левой стрелке, то уже второй рисунок получает margin-left равным -260px, а у четвертого рисунка margin-right приравнивается равным ноль пикселей. И напоследок рассмотрим клик по правой стрелке. Если перед кликом по правой стрелке был совершен клик по левой, то просто следует все вернуть назад. Первый рисунок получает margin-left равным 0px, а третий рисунок обратно получает margin-right равным -260px. Теперь разобравшись в html, нам полностью предстоит реализовать все это на javascript. Этому посвящен следующий пост.