Комментарий: когда дело доходит до слайдера, в прошлом, CSS+JS использовался для достижения связанных с ними эффектов переключения. Я слышал, что все обсуждают метод реализации использования HTML5+CSS3, но я никогда не реализовал его сам. Хорошо, на этот раз у меня есть время играть в CSS3. Заинтересованные друзья могут узнать больше
Ну, в прошлый раз я сказал, что добавлю несколько статей быстро, но я спокойно сломал встречу. Это было опубликовано только за другой месяц, что действительно удручает. Я обнаружил, что всегда не мог найти время в последнее время, и в основном организовал один проект за другим. Я либо не мог найти подходящую тему, когда был свободен, либо не мог найти время, когда я смутился. Поэтому я решил подвести итог знаний о проблемах, с которыми я боролся в течение определенного периода времени, и изучить их по одному, когда я свободен, а затем организую их в статьи и делюсь ими.Начиная с темы, когда вы упоминаете Slider, вы всегда использовали CSS+JS для достижения связанных с ними эффектов переключения. Я слышал, что все обсуждают метод реализации использования HTML5+CSS3, но я никогда не реализовал его сам. Хорошо, на этот раз у меня есть время играть в CSS3. На самом деле, меня также привлекала сообщение о Вейбо. Видя, что результаты, достигнутые другими, были очень хорошими, у меня было желание сделать это.
1. Диаграмма воспроизведения
Это выглядит не сильно отличается от эффекта, достигнутого с JS в прошлом, но общее чувство очень элегантно. Что ж, сила CSS3 заключается в том, что я написал очень мало кода для достижения более сложных результатов. Однако этот пример также имеет что -то не идеальное. При переключении между двумя изображениями, если в середине есть картинки, вы все равно увидите их во время выполнения анимации CSS3, которая менее мощная. Но подумайте об этом, это эффект, достигнутый чистым CSS3. Сложные изменения структуры HTML, реализованные с использованием JS, не могут быть замечены здесь, поэтому вышеупомянутый эффект трудно просто реализовать с помощью CSS3.
2. Структура HTML
<div>
<input receed type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<input type = "radio">
<div>
<div>
<div>
<статья>
<div>
<h1> title1 </h1>
<a href = "#"> description1 </a>
</div>
<img src = "img/pic1.png"/>
</article>
<статья>
<div>
<h1> title2 </h1>
<a href = "#"> description2 </a>
</div>
<img src = "img/pic2.png"/>
</article>
<статья>
<div>
<h1> title3 </h1>
<a href = "#"> description3 </a>
</div>
<img src = "img/pic3.png"/>
</article>
<статья>
<div>
<h1> title4 </h1>
<a href = "#"> description4 </a>
</div>
<img src = "img/pic4.png"/>
</article>
<статья>
<div>
<h1> title5 </h1>
<a href = "#"> description5 </a>
</div>
<img src = "img/pic5.png"/>
</article>
</div>
</div>
</div>
<div>
<метка для = "slider1"> </label>
<метка для = "slider2"> </label>
<метка для = "slider3"> </label>
<метка для = "slider4"> </label>
<метка для = "slider5"> </label>
</div>
<div>
<метка для = "slider1"> </label>
<метка для = "slider2"> </label>
<метка для = "slider3"> </label>
<метка для = "slider4"> </label>
<метка для = "slider5"> </label>
</div>
</div>
Приведенный выше код является основной структурой HTML, которая содержит входную радио -группу, которую вы можете видеть здесь как концентратор, и она играет очень важную роль в этом примере (вот почему я не хочу скрывать ее в примере, настоящий герой не должен быть героем за кулисами).
Ползунки ниже содержат изображения, которые необходимо отобразить. Здесь, кажется, это эффект раздвижной двери, которая отображает разные изображения, контролируя внутреннюю левую.
Управление - это стрелка переключения на левой и правой сторонах изображения. Не волнуйтесь, зачем вам дизайн 5? Кажется, только двое достаточно. Пожалуйста, напомните нам, что в этом примере мы никогда не будем использовать JS для достижения переключения.
Последняя активность - это кнопка нажатия под изображением. Вы можете напрямую выбрать изображение, которое вы хотите просмотреть, нажав на него. Вы также можете обогатить структуру внутри, чтобы спроектировать эффект миниатюры.
3. Лист стиля CSS
@Charset UTF-8;
/* общий */
Body {fourene: #ddd; overflow-x: hidden;}
#bd {ширина: 960px; маржа: 100px auto; max-width: 960px;}
/ * Модуль: ползунки */
#sliders {
граница радий: 5px;
Box-Shadow: 1px 1px 4px #666;
Заполнение: 1%;
Фон: #ffff;
}
#Overflow {
Ширина: 100%;
переполнение: скрыто;
}
#sliders .inner {
Ширина: 500%;
ТРАНСИЗН: все 1s линейно;
-Вобкит-трансляция: все 1s линейно;
}
#sliders article {
Плавание: осталось;
Ширина: 20%;
}
#sliders article .info {
позиция: абсолютно;
непрозрачность: 0;
Заполнение: 30px;
Цвет: #666;
Семейство шрифта: ариальная;
Переход: непрозрачность 0,1 с легкостью;
-Webkit-transform: transtatez (0);
-Вобкит-трансляция: непрозрачность 0,1s ext-out;
}
#sliders article .info h1 {
размер шрифта: 22px;
шрифт-вес: жирный шрифт;
Покрас: 0 0 5px;
}
#sliders article .info a {
Цвет: #666;
Текстовое декорация: нет;
}
/ * Модуль: элементы управления */
#controls {
Высота: 50px;
Ширина: 100%;
маржинальная версия: -25%;
}
#controls метка {
дисплей: нет;
Ширина: 50px;
Высота: 50px;
непрозрачность: 0,3;
курсор: указатель;
}
#controls метка: Hover {
непрозрачность: 1;
}
/ * Модуль: Active */
#активный {
Ширина: 100%;
маржинальная версия: 23%;
Текст-альбом: Центр;
}
#активная метка {
дисплей: встроенный блок;
Ширина: 10px;
Высота: 10px;
граница радий: 5px;
Фон: #BBB;
Пограничный цвет: #777;
}
#активная метка: Hover {
Фон: #CCC;
}
/ * Проверено ввода стиль изменения */
#slider1: проверен ~ #active мютром: Nth-Child (1),
#slider2: проверено ~ #active label: nth-child (2),
#slider3: проверено ~ #Active Label: Nth-Child (3),
#slider4: проверено ~ #Active Label: Nth-Child (4),
#slider5: cherced ~ #active label: nth-child (5) {
Фон: #333;
}
#slider1: проверено ~ #controls метка: Nth-Child (5),
#slider2: проверено ~ #controls метка: Nth-Child (1),
#slider3: проверено ~ #controls метка: Nth-Child (2),
#slider4: проверено ~ #controls label: nth-child (3),
#slider5: проверено ~ #controls label: nth-child (4) {
дисплей: блок;
Плавание: осталось;
Предпосылки: URL (../ IMG/PREV.PNG) NO-Repeat;
Мяглевая маржа: -70PX;
}
#slider1: проверено ~ #controls метка: Nth-Child (2),
#slider2: проверено ~ #controls метка: Nth-Child (3),
#slider3: проверено ~ #controls label: nth-child (4),
#slider4: проверено ~ #controls Метка: nth-child (5),
#slider5: проверено ~ #controls label: nth-child (1) {
дисплей: блок;
Поплавок: верно;
Предпосылки: URL (../ img/next.png) no-repeat;
Право маржи: -70px;
}
#slider1: проверено ~ #sliders статья: nth-child (1) .info,
#slider2: проверено ~ #sliders статья: nth-child (2) .info,
#slider3: проверено ~ #sliders статья: nth-child (3) .info,
#slider4: проверено ~ #sliders статья: nth-child (4) .info,
#slider5: проверено ~ #sliders статья: nth-child (5) .info {
непрозрачность: 1;
Переход: все 0,6 с. 1S;
-Вобкит-трансляция: все 0,6 с. 1S;
}
#slider1: проверено ~ #sliders .inner {
Полевая левая: 0;
}
#slider2: проверен ~ #sliders .inner {
Мяглевая маржа: -100%;
}
#slider3: проверено ~ #sliders .inner {
Мяботая маржа: -200%;
}
#slider4: проверено ~ #sliders .inner {
Мяглевая маржа: -300%;
}
#slider5: проверен ~ #sliders .inner {
Мяботая маржа: -400%;
}
Хорошо, я признаю, что приведенный выше код CSS действительно более сложный и сложный, но он действительно достигает очень ослепительного эффекта, и когда я закончил писать, я также был впечатлен огромной магией CSS3. Полем Полем
Код в первой половине этого в основном используется для разработки структуры ползунка, включая некоторые округлые углы и дизайн украшения тени. Вторая половина в основном содержит некоторые эффекты анимации, чтобы реализовать некоторые динамические эффекты при переключении изображений или кнопок управления. Тем не менее, наиболее важным является использование нижнего селектора CSS3, который действительно реализует функцию переключения изображений. Я действительно думаю, что селекторы играют очень, очень важную роль в примерах, потому что это то, что я игнорировал в обучении CSS3 в прошлом. Я всегда думаю, что то, что мощно в CSS3, - это округлые углы, тени, деформации и анимация, но этот код действительно говорит нам, насколько важен селектор в CSS3. В какой -то сложной логике использование этих селекторов CSS3 может достичь невообразимых эффектов.
4. Принцип реализации слайдера
Когда я впервые закончил читать приведенный выше код, вы должны быть такими же, как я в начале. Я не верю, что такой код может достичь эффекта слайдера.
ОК, позвольте мне проанализировать принцип реализации.
Как я уже говорил выше, главная радиоподобная группа очень важна и является центром реализации слайдера. Да, это действительно так.
Для реализации слайдера есть только два типа переключения, то есть при нажатии кнопки управления изображение переключается; В то же время, при переключении изображения убедитесь, что все кнопки управления отображаются правильно.
В этом примере мы используем метку в качестве кнопки управления, статья содержит изображение и внутреннюю в качестве контейнера изображения.
Просто думая об этом просто, этикетка и статья не могут быть связаны, а информация о статусе метки трудно отразить выбор статьи. Если нет чего -то, что может записать состояние переключения метки, а затем выберите изображения в соответствующем порядке, чтобы отобразить его с помощью некоторых средств.
Что ж, теперь вы понимаете, почему эта радио -группа является ключом к реализации слайдера. Да, это, кажется, для записи статуса щелчка на этикетке.
Мы используем этикетку для атрибута, чтобы соответствовать соответствующему радио. Когда этикетка нажимается, соответствующее радио становится проверено. Затем переместите внутренний налево через мощный селектор CSS3, чтобы отобразить соответствующее изображение. Конечно, соответствующие кнопки выбора левого и правого также отображаются через селектор. Точно так же, когда нажимают левые и правые кнопки, статус 5 кнопок выбора, ниже, также реализуется таким образом.
Приведенный выше принцип реализации относительно прост. На самом деле, если вы можете записать состояние нажатия кнопки управления, вы можете достичь эффекта ползунка через селектор.
Не только радиогрузки могут сделать это, A: Hover также может реализовать переключение изображений при падении в соответствии с этой идеей. Конечно, есть много других методов реализации, если вы понимаете принцип реализации.
5. Резюме
На самом деле, CSS3 действительно веселый, со многими эффектами. В CSS3 есть только неожиданные результаты, но никто не может этого сделать. Иногда я действительно нахожу, что для написания CSS3 требуется немного умности, а иногда некоторые изысканные методы реализации действительно достойны похвалы.
Что ж, как небольшая практика, этот пример приобрел много, особенно мощного селектора, что заставляет меня стыдиться того, что я игнорировал его в прошлом. Полем Полем
Мне также нужно рассмотреть вопрос о прерывищем переключении изображений. Кажется, я должен использовать немного JS, чтобы помочь.
Хорошо, давайте поделимся этим, если есть результат.