Как да си направим плъзгача на CSS и HTML, JavaScript, без да
Лесна смяна на слайдер с анимирани рамки
Забележка: В този пример, аз ще се фокусира върху най-новите функции на CSS. Кодът не е проектиран да работи в по-стари браузъри.
За да започнете да създавате слайдер с този код:
Контейнер плъзгача - Разделение клас с sliderA. Всеки кадър на плъзгача описано tromya тагове:
- Бутон за избор (вход тип = "радио"), отговорен за състоянието на рамката (видими / невидими)
- За да се поставят етикети. отговорен за показване на бутоните за навигация на плъзгача.
- Div таг, в които съдържанието на рамката.
Ние започваме да работим по стил. контейнер:
Молим фиксираните размери на контейнера. Поставих им, равна на размера на изображенията, които ще се използват в този пример. позиция на имота: роднина е необходимо да се постави нов позиции отправна точка на вградени контейнери. Имотът текст подравняване: център добавих, за да центрирате лентата на етикети бутони, които ще бъдат разположени както инлайн елементи.
Показва радио бутони ние не трябва да ги скрие;
Ние правим бутон етикети. Код много, но нищо сложно:
Настроя дисплея на имота: инлайн блок. което ще постави етикет на един ред и да ги приведе в средата като елементи вградени, а в същото време да ги помолите фиксиран размер като блок. Тогава поставих ширината и височината, както и радиуса от корнер, цвета на фона и цвета на рамката. Всичко това води до факта, че нашите етикети са показани под формата на малки кръгли бутони.
курсора ви позволява да настроите външния вид на курсора на мишката, когато кръжи над бутона. Поставих стойността на показалеца. т.е. на показалеца на мишката ще бъде същото, както когато мишката върху линк ( "пръст").
Z-индекс имот е необходимо да маркирате бутона лежи на върха на рамката на плъзгача. За същия набор позиция имота: роднина - в противен случай Z-индекс няма да работи.
марж десен добавя пълнеж между бутоните и горната част: 90% ги придвижва към дъното на контейнера. Можете да настроите вертикалната позиция на бутоните по-интелигентно, но тук ще се огранича по този начин.
Аз също определя цвета на фона на бутона натиснат и бутоните, които се движат мишката. Имоти определя преход анимация за промяна на заден план.
Също така, ние трябва да се премахнат всички интервали или нови редове между маркерите на плъзгача, като с помощта на дисплея: инлайн блок, те ще ни даде допълнителни пространства между клавишите. Така че ние направихме в предишната статия. Сега не съм направил това, за да се опрости възприемането на HTML код.
Резултатът е такъв празен слайдер:
Добавяне на стилове за DIV-а, в които съдържанието на рамката ще бъдат:
Всички рамки, ще заемат една и съща позиция. позиция: абсолютна позволява да премахнете блокове от потока и далеч от произволно. отгоре. наляво. прав. долна рама координати настроена така, че рамката заема целия плъзгача контейнер изцяло. Z-индекс изпраща кадъра по кадър бутон за превключване, в противен случай не можем да видим тези бутони или, без преса.
Сега най-важната част на плъзгача - покажете или скриете рамката, в зависимост от бутона натиснат. Традиционният подход да се скрие елементи на страницата, използвайки свойствата показване: няма ние не отговарят съвсем точно. В крайна сметка, за плъзгача бихме искали да направим плавното преминаване на персонала, но CSS не позволява да се определи стойността на дисплея на анимацията с помощта на правилата за преход.
За мека кожа и външен вид на персонала, ние се нуждаем две свойства: непрозрачност и видимост; и споменатият преход.
непрозрачност свойство позволява знак да се определи степента на прозрачност на елементи на страницата, от 0 (напълно прозрачен) до 1 (напълно непрозрачен). Например, непрозрачност: 0.5 - непрозрачност на 50%.
Но дори и напълно прозрачен елемент, макар и невидими, продължава да се отговори на кликвания върху бутона. Ето защо, ако вие сте в линка плъзгача, кликнете върху линка, може да предизвика не един начин връзки, което е видимо на екрана.
За да премахнете напълно елемента и да я направи прозрачен за кликвания на мишката, тя ще вземе втори имот: видимост: скрит. Въпреки това, видимостта не е ви позволява да настроите частична прозрачност. Елемент видими или не.
Ето защо, ние ще използваме прехода, за да анимирате двете свойства, за да се постигне желания ефект нас. Същността на метода е, както следва:
- Когато един потребител се включва рамката, нова рамка изглежда видимост: видими. но с непрозрачност: 0.
- Тогава анимация непрозрачността стойности в двете рамки. Старият рамката плавно спада до нула, и новото - постепенно се издига до единство.
- След приключване на анимацията, видимост на старата рамка е настроен да е скрит. така че да не пречат на кликвания на мишката по новата рамка.
Ето един код имам:
Освен това добавихме правило за р етикет вътре в рамката, за да се направи надписи за снимки:
Добавя HTML-код плъзгач за нашия пример:
И тук ние получаваме следните резултати:
Изгрев над острова
Лесна смяна на слайдер с анимационни кадри, на втория вариант
Плъзгачът може да се постави както на обичайните снимки и всеки текст и линкове към други страници в сайта си и така нататък.
В случая, когато използвате плъзгача, за да се настанят прости изображения (например, вие сте турист, и публикува снимки от пътуванията си), има желание за подобряване на плъзгача, така че кликнете върху плъзгача, което води до преминаване към следващото изображение. В предишния пример, рамки плъзгащите се включват само кръгли бутони и натиснете върху самото изображение не прави нищо.
Usovershestvuem ни плъзгача. Шаблонът за слайдер добави още един етикет за всеки кадър:
Както можете да видите, етикетът идва след първия кадър, вторият кадър активира. Tag намира след втория фрейм активира третия кадър; след третата - chertvorty. Последно етикет активира първия кадър.
Етикети ние поставят така, че да покриват цялата плъзгача и лежи над изображението, но бутоните по-долу на лентата. Tags прозрачен, така че те могат да се видят чрез съдържанието на рамката. Когато картината се показва редица N с него марка се появява, за да се премине към рамка N + 1. (За последния кадър. - на прехода маркера на първия кадър)
По този начин, когато потребителят кликне върху изображението предизвика активиране на следващото изображение. резултат:
Изгрев над острова
Как да се създаде един образ се променя като слайдшоу?
Подобно на пъпка, която не работи имам плъзгач, провери не се включва
Възможно ли е да използвате INPUT vmete DIV на. например, когато се движите уреда от страна на постоянно променящите се картина?
Копирах всичко да е точно, но не можех да плъзгача. В горната и 5 пиксела вертикално под 5 графики просто добавят. Как да се определи? Или може освен това, че е необходимо да се напише?