За да работи правилно, ние се нуждаем примери JQuery библиотека и три графичен pic1.jpg имена на файлове, pic2.jpg, размер 200x200 пиксела pic3.jpg.

Кодът на проба се състои от два файла: slider.html и slider.js. В slider.html файл дефинира HTML-маркировка единица с плъзгач, съдържа изображения и бутони плъзгач за превъртане. В slider.js файл съдържа описание на това какво се случва, когато натиснете "ляво" и "дясно".

1. File slider.html

В началото на файлови дефинирани стилове. Смисълът на повечето от стиловете - премахнати различните маржове за елементи, като когато се придвижите плъзгача прилага аритметика изчисляването използване на широчината на обектите и е важно, че елементите не са отклонения в ширина от определения ръчно, в противен случай по време на превъртане непредсказуем офсетов и други грешки може да се случи.

Самата структура на вложените обект плъзгача predstvlyayu 3: Lenta, продължение и плъзгача.

Lenta Object opredeleyaet видима площ на плъзгача, в примера, който го 660 пиксела ширина ограничи (това е достатъчно само за 3 изображение 200x200 пиксела с тире).

Прод обект определя съдържанието на плъзгача, той е свободен да се движи вътре Lenta обекта хоризонтално, създавайки визуален ефект на превъртане.

плъзгача на обекта съдържа таблица с изображения се показват в плъзгача. В този пример, не маса не може да направи, в противен случай изображението започне да се подредят не само хоризонтално, но и вертикално, което противоречи на идеята за плъзгач.

В допълнение към плъзгача в маркиране определено клавишите със left_btn ( "ляво") и right_btn ( "право"), за да се придвижите плъзгача в съответните направления.

манипулатор събитие от бутони, съхранявани в slider.js файл.

2. В досието slider.js

настройки се използват в началото на slider.js файл:
on_screen_pic - брой снимки във видимата част на плъзгача;
slider_diff - офсет в пиксела, до който се превърта, като натиснете бутона плъзгач (задължително трябва да е равна на сумата от ширината на изображението, както и подложка);

Файлът се използва slider.js елементарна аритметика. Алгоритъм на работа на всеки бутон е както следва:
1. Определете дали ние все още може да се движи плъзгача в посока не се наведе до ръба;
2. Ако можете, след това преместете плъзгача, или да напуснат ситуация да остане непроменена.

Искате ли да се допълни материала? - Пишете ни на: [email protected]