Как да създадете красив автоматичен слайдер с jQuery
Наистина харесвам плъгина jQuery Coda Slider. Често го използвам, когато създавам различни джаджи.
Използвах го, когато създавах този плъгин. Има прозорец с основно съдържание (панели), който се превърта наляво или надясно и показва различно съдържание. Обикновено броят на панелите се задава първоначално, но кодът е написан по такъв начин, че премахването или добавянето на нови панели не е трудно. По-долу има и връзки, които ви отвеждат до всеки панел. Тези връзки могат да имат произволен вид (хипервръзки, картини и т.н.) и водят до различни панели. За всичко това е отговорен плъгинът CODA SLIDER.
Кликнете върху изображението или демо връзката под него, за да видите приставката в действие.
Демо версията е тук
Можете да изтеглите целия скрипт тук
За крайния резултат са ви необходими:
-Различни видове предварително подготвено панелно съдържание. Можем да поставим всичко в панелите, но за да улесним нещата, ще поставим някои формати като начало. Основният формат е картина с размер на панел с насложено текстово описание.
-Автоматично възпроизвеждане. Панелите ще се превъртат автоматично бавно, но можете също да щракнете върху връзката, за да преминете към произволен панел.
-Индикатор под формата на стрелка. Визуалният индикатор ще бъде стрелка над малка картинка, която показва на кой панел е плъзгачът в момента.
HTML
Ето общата структура на HTML слайдера
CSS
Пълният CSS код се състои от просто нулиране, няколко помощни стила и проста структура. По-долу ще намерите CSS кода, свързан с плъзгача, но можете също да видите целия код тук.
Всичко, което започва с ".strip", се отнася директно заплъзгач. Именно тези редове код го карат да работи правилно. Започвайки с ".nav-thumb" и по-долу е кодът, който се отнася конкретно за нашия пример (демо). Малките снимки имат тънка черна рамка.
Класът ".active-thumb" също е много важен. Ако миниатюрата има такъв клас, тя придобива специален фон под формата на бяла стрелка отгоре, която сочи към активния панел.
Javascript
Между маркерите на вашата страница трябва да включите jQuery и всички други файлове на плъгини. Изглежда така:
Този код активира плъзгача, но трябва да добавим още няколко функции, вместо да правим промени в самия плъзгач. Можем да ги добавим, като напишем малка функция малко по-високо. За да постигнем ефекта на автоматично превъртане, ще извикваме щракване върху следващата миниатюра на всеки три секунди. Ще извикаме функцията "theInterval" и ще ни трябват няколко променливи.
Този код идва веднага след предишния до
Още няколко важни бележки.
Виждате числото "6" в нашата функция?
Той отговаря за броя на панелите в плъзгача. Ако искате да добавите или премахнете още панели, трябва да промените този номер.
Този урок е подготвен за вас от екипа на ruseller.com Източник на урока: www.css-tricks.com Превод: Максим Шкурупий Урокът е създаден: 19 март 2009 г. Преглеждания: 102997 Правила за препечатване
5 последни урока от рубриката "jQuery"
jQuery анимация за писане
Днес бихме искали да ви разкажем за библиотеката TypeIt, безплатен плъгин за jQuery. С негова помощ можете да симулирате писане. Ако всичко е настроено правилно, можете да постигнете много реалистичен ефект.
Хронология с jQuery
Временен плъгин jQueryвезни.
Начертайте диаграма на Гант
jQuery плъгин за диаграма на Гант.
AJAX и PHP: Качване на файл
Пример за това как да качите файл с помощта на PHP и jQuery ajax.