Slider скрипт снимки JS HTML CSS

скрипт например

Започнете да пишете.

СТЪПКА 1 - Грим плъзгача HTML + CSS

Ние ще напише сценария като отделен пример. Мисля, че го връзвам към вашата база данни и структурата на сайта няма да е трудно.

В отделна папка, създайте HTML файл с произволно име, например slider.html. и поставете следния код:

Надяваме се с HTML код, няма проблем. Единственото нещо, което, както можете да видите, някои стилове са извършени пряко в блока (дисплей: няма; фон: URL адрес (IMG-5.jpg) не-repeatcentertop). Тази процедура е необходима за формирането на блокове от базата данни, където фон изображение, е взета от базата данни. Що се отнася до дисплея: няма. тя също така е необходимо, без да се блокира, няма да могат да се появят и след това изчезват.

Нека да разгледаме кода на CSS. можете да го добавите към файла или да направите отделен CSS файл:

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

За по-голяма прегледност, нека да погледнем на снимката, тя изглежда като, след което направи, за да се движат тези снимки под формата на слайдер.

Стъпка 2 - JS

Ние разглеждаме всички функции:

превключвате - Тази функция е отговорен за ефекта на сгъване и разгъване. детайл, ние няма да го разгледа, тъй като тя не е толкова важно. Това отнема един-единствен аргумент - idhtmlelementa. Ако е била оповестена на елемента (блок), тя се изпълнява сгъване. Ако уредът е невидим (минимизиран), извършва се разгръща.

Можете да използвате всеки друг ефект, това е въпрос на вашите умения.

VHE, GH - са функции, които се използват, за превключване функция. Първият (VHE) е отговорен за прозрачността на обекти. Вторият (GH) - изчислява височината на блока, е необходимо за плавен сгъване / разгъване.

плъзгача - е отговорен за обръщане чрез снимки. 2 получава аргумент (сега, последно). Сега - е номер блок (снимки), които искате да се показват. Последно - е идентификационният номер на блок (снимки), които искате да скриете. Първоначално функцията се стартира автоматично, а последният аргумент е 0, което означава, че стария блок изображението не се съсирва.

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

run_function - функция, която ще се нарича, когато страницата е заредена (при зареждане функция). В него ние наричаме функцията слайдер, който продължава да се нарича. Това е всичко автоматиката.

Как да инсталирате този скрипт?

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

Първо изберете MySQL заявка. последните 5 елементи от базата данни, или най-популярни. Това е личен въпрос, както се изисква от "Фън Шуй."

Аз пиша тези статии в многоизмерна масив, например, $ съдържание.

Съдържанието на елементите в масив ($ елемент) трябва да съдържат следната информация:

URL на материал (не е задължително адреса, може да бъде някакъв идентификатор статия, която образува URL върху него).

Име на материала (заглавие на вашия материал за справка).

По-нататъшното развитие на сценария

Тя не винаги е изображението, което ще бъде показано в плъзгача ще бъде с размерите на 380 X 240. Не е необходимо да ги коригира в Photoshop, или да създадете отделен.