С течение на времето и развитието на технологии в областта на уеб дизайна и променящи се нужди / изисквания на потребителите за сайтове със съдържание.Ако по-рано, че е най-вече на съдържанието на текста с малък брой тематични изображения, днес тя е доминиращият елемент на графиката.Тя ви позволява бързо да получите най-необходима и полезна информация, както и да не губите време в четене на дълги текстове.Ето защо, по-голяма популярност, а освен това е съществен елемент от уеб страниците са плъзгачи.Те са блокове с различно съдържание в тях - от изображения на връзки.Модерният начин за добавяне на този уеб обект - използвате библиотеката JQuery.Sliders създадени с този инструмент, да получат удобен, лесен за използване, и тя изглежда много впечатляващо.След това ще разгледаме как да направи тези елементи на уеб страници на техните собствени.Поради доста голям брой стандартизирани инструменти, е възможно да се приложи JQuery-плъзгачи от различни видове и разнообразно съдържание.
Как да добавите слайдер към уеб страница?
начин да добавите слайдер калодки за номера на страницата.Често не е необходимо да се напише HTML-код и се рови в сценария.Има значително количество безплатни библиотеки, предлагайки на потребителите готови шаблони, които ви позволяват да добавяте JQuery-плъзгачи към вашия сайт.Всичко, което трябва да направите - е да го копирате в изходния код на уеб страницата си и се насладете на резултата.Въпреки това, в този случай, възможността за прилагане на вашата творческо въображение е ограничен.Поради това е полезно, за да може да се създаде елемент дизайн независимо.За да направите това, което трябва да знаете как да се приложи един прост слайдер JQuery и само го усложняват, винаги можете да се добавят допълнителни елементи в кода.
Създаване слайдер себе си: код в HTML
първо, от къде да започна - е да се регистрирате в бъдеще оформлението на плъзгача.
- Създайте файл в HTML-блок Slideshow, който ще съдържа всички наши пързалки (снимки, и така нататък.).
- Тя лежеше списък ул всеки артикул от която ще се съхранява отделно пързалка.
Работната в CSS
продължи да се прилага, за да го желаните характеристики на стил, използвайки CSS-документ.Необходимо е да се наложи съдържанието ни JQuery слайдер да работи правилно и има подходящия вид.На този етап, ние сме изправени пред следните задачи:
- направи блок Slideshow дисплеи само един, точно в момента, слайд (или съдържанието на картината) на, а останалите са били скрити;
- Предметните стъкла се подреждат един след друг (от ляво на дясно);
- направя ул-контейнер, в който да съхранявате слайдовете, да се движи (ляво и дясно).
за този, даден в CSS-файл на следните параметри:
- за слайдшоу: препълване-X - превъртете, препълване-Y - скрит:
- за ул: плувка - лявата.
Можете също така да зададете параметрите на ширината (широчина), височина (височина), на фона (фона) и така нататък.
предписва код в JQuery
в HTML и са направени CSS всички необходими промени.Остава случаят с код JQuery, плъзгачи, които трябва да притежава следните параметри:
- пързалки трябва да следват една след друга с определен интервал от време;
- когато задържите показалеца на мишката върху движението им следва да се прекрати.
За това ние декларираме две променливи: slidewidth (равна на дължината на плъзгача) и slidertime (определя периода на слайдовете промени).Таймерът се стартира, когато страницата е напълно заредена сайт.За тази цел параметър вратовръзка мишката е върху слайда (който спира възпроизвеждане на изображение).
забравяйте да предпише дължината на контейнера ул.Тя ще бъде равен на броя на кадрите, умножена по дължината на всеки слайд.
поставете функции, отговорни за възпроизвеждане на изображение.Това е всичко, можете да проверите работата на вашия слайдер.
Заключение В тази статия ще погледна как да създадете свой собствен JQuery-плъзгачи, за да вмъкнете страница на вашия сайт.Използвайки примера на обикновен слайдер, можете да излезе с тяхна собствена интерпретация на това, което прави подходящи промени в изходния код.Това ще подобри дизайна и да направи вашето ползване на сайта по-удобен за посетителите.
