Реализован простой веб-макет, содержащий пять разных блоков, каждый со своим фоновым изображением и некоторым расстоянием между ними. При наведении курсора на поле его фоновое изображение тускнеет, а текст становится белым. Поля и кнопки помещены в контейнер, и вся страница выглядит как галерея.
<div class="контейнер">
<div id="слайд">
<div class="item" style="background-image:url('./img/Zhang Ruonan01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi01.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi02.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi06.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi04.jpg')"></div>
<div class="item" style="background-image:url('./img/Ju Jingyi07.jpg')"></div>
</div>
<div class="buttons">
<div класс="слева">
< Предыдущий</div>
<div class="center">Загрузить обои</div>
<div class="right">Далее ></div>
</div>
</div>
</div> * {
маржа: 0;
заполнение: 0;
размер коробки: граница-коробка;
}
.контейнер {
ширина: 100vw;
высота: 100вх;
положение: относительное;
переполнение: скрыто;
}
.элемент {
ширина: 240 пикселей;
высота: 160 пикселей;
позиция: абсолютная;
верх: 50%;
слева: 0;
трансформировать: транслироватьY(-50%);
радиус границы: 10 пикселей;
box-shadow: 0 30px 50px #505050;
размер фона: обложка;
фоновая позиция: центр;
переход: 1с;
}
.item:nth-child(1),
.item:nth-child(2) {
слева: 0;
верх: 0;
ширина: 100%;
высота: 100%;
трансформировать: транслироватьY(0);
тень коробки: нет;
граница-радиус: 0;
}
.item:nth-child(3) {
осталось: 70%;
}
.item:nth-child(4) {
слева: расчет (70% + 250 пикселей);
}
.item:nth-child(5) {
слева: Calc(70% + 500px);
}
.item:nth-child(n+6) {
слева: Calc(70% + 750px);
непрозрачность: 0;
}
.кнопки {
ширина: 100%;
позиция: абсолютная;
внизу: 50 пикселей;
поле слева: -50 пикселей;
выравнивание текста: по центру;
дисплей: гибкий;
оправдание-содержание: центр;
}
.buttons div {
ширина: 120 пикселей;
высота: 50 пикселей;
высота строки: 50 пикселей;
выравнивание текста: по центру;
радиус границы: 5 пикселей;
поле: 0 25 пикселей;
переход: 0,5 с;
курсор: указатель;
выбор пользователя: нет;
размер шрифта: 20 пикселей;
цвет: #fff;
цвет фона: rgba(0, 0, 0, 0,4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
} const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const слайд = document.querySelector("#slide")
let openClick = true // Обработка дросселирования (чтобы гарантировать, что процесс выполнения анимации, кнопка не нажимается повторно)
leftBtn.addEventListener("клик", () => {
если (openClick) {
openClick = false // После срабатывания щелчка отключаем кнопку const items = document.querySelectorAll(".item")
слайд.prepend(элементы[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1 секунда, чтобы снова открыть кнопку}
})
rightBtn.addEventListener("клик", () => {
если (openClick) {
опенклик = ложь
const items = document.querySelectorAll(".item")
слайд.appendChild(элементы[0])
setTimeout(() => openClick = true, 1000)
}
}) * {
маржа: 0;
заполнение: 0;
размер коробки: граница-коробка;
}Этот код устанавливает глобальный стиль CSS, включая установку блочной модели элемента в border-box, то есть ширина и высота блочной модели включают границу и отступы элемента, а не только содержимое элемента.
.контейнер {
ширина: 100vw;
высота: 100вх;
положение: относительное;
переполнение: скрыто;
}Этот код устанавливает стиль CSS контейнера, включая установку ширины и высоты контейнера на 100vw и 100vh, которые являются шириной и высотой области просмотра. При этом задайте для контейнера относительное позиционирование, то есть позиционирование относительно его родительского элемента. Наконец, установите свойство переполнения контейнера скрытым, то есть элементы, выходящие за рамки контейнера, не будут отображаться.
.элемент {
ширина: 240 пикселей;
высота: 160 пикселей;
позиция: абсолютная;
верх: 50%;
слева: 0;
трансформировать: транслироватьY(-50%);
радиус границы: 10 пикселей;
box-shadow: 0 30px 50px #505050;
размер фона: обложка;
фоновая позиция: центр;
переход: 1с;
}Этот код устанавливает стиль CSS поля, включая установку ширины и высоты поля на 240 пикселей и 160 пикселей, что соответствует размеру поля. В то же время установите абсолютное позиционирование поля, то есть позиционирование относительно его родительского элемента. Наконец, установите радиус границы блока на 10 пикселей, что соответствует закругленному углу блока. Размер фонового изображения коробки — обложка, закрывающая всю коробку. Фоновое изображение центрировано. Наконец, установите эффект перехода поля на 1 секунду, то есть время эффекта перехода составляет 1 секунду.
.item:nth-child(1),
.item:nth-child(2) {
слева: 0;
верх: 0;
ширина: 100%;
высота: 100%;
трансформировать: транслироватьY(0);
тень коробки: нет;
граница-радиус: 0;
}Этот код устанавливает стили CSS для первого и второго полей, включая установку их позиции на 0, что означает, что они закрывают верхнюю часть контейнера. Также установите их высоту на 100%, что означает, что они покрывают всю высоту контейнера. Наконец, установите для их свойств преобразования значениеtranslateY(0), что означает, что они не будут двигаться вниз. Также установите для их тени и радиуса границы значение 0, т. е. у них нет тени и границы.
.item:nth-child(3) {
осталось: 70%;
}Этот код устанавливает стиль CSS третьего поля, включая установку его положения на 70 % от левой стороны контейнера.
.item:nth-child(4) {
слева: расчет (70% + 250 пикселей);
}Этот код устанавливает стиль CSS четвертого поля, включая установку его положения на 250 пикселей от правой стороны третьего поля.
.item:nth-child(5) {
слева: Calc(70% + 500px);
}Этот код устанавливает стиль CSS пятого поля, включая установку его положения на 500 пикселей от правой стороны третьего поля.
.item:nth-child(n+6) {
слева: Calc(70% + 750px);
непрозрачность: 0;
}Этот код устанавливает стили CSS для всех полей, включая установку их положения на 750 пикселей справа от третьего поля. Также установите их непрозрачность на 0, т.е. они невидимы.
.кнопки {
ширина: 100%;
позиция: абсолютная;
внизу: 50 пикселей;
поле слева: -50 пикселей;
выравнивание текста: по центру;
дисплей: гибкий;
оправдание-содержание: центр;
}Этот код предназначен для установки стиля CSS кнопки, включая установку ширины кнопки на 100 %, то есть размер кнопки такой же, как у контейнера. В то же время установите положение кнопки на расстоянии 50 пикселей от нижней части контейнера. Наконец, установите выравнивание кнопки по центру, что означает, что кнопка будет центрирована по горизонтали.
.buttons div {
ширина: 120 пикселей;
высота: 50 пикселей;
высота строки: 50 пикселей;
выравнивание текста: по центру;
радиус границы: 5 пикселей;
поле: 0 25 пикселей;
переход: 0,5 с;
курсор: указатель;
выбор пользователя: нет;
размер шрифта: 20 пикселей;
цвет: #fff;
цвет фона: rgba(0, 0, 0, 0,4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}Этот код предназначен для установки стиля CSS кнопки, включая установку ширины кнопки на 120 пикселей и высоты на 50 пикселей, что соответствует размеру кнопки. В то же время установите высоту строки кнопки на 50 пикселей, что соответствует высоте кнопки. Выравнивание текста кнопки осуществляется по центру, то есть текст центрируется по горизонтали. Радиус границы кнопки составляет 5 пикселей, что соответствует закругленным углам кнопки. Поле кнопки составляет 0 25 пикселей, то есть расстояние между левой и правой сторонами кнопки по горизонтали составляет 25 пикселей. Эффект перехода кнопки составляет 0,5 секунды, то есть время эффекта перехода составляет 0,5 секунды. Атрибут курсора кнопки — указатель, то есть при наведении указателя мыши на кнопку форма мыши изменится на форму руки. Атрибут выбора пользователя для кнопки равен none, то есть пользователь не может выбрать текст на кнопке. Размер шрифта кнопки составляет 20 пикселей, что соответствует размеру текста кнопки. Цвет текста кнопки — белый, что соответствует цвету текста кнопки. Цвет фона кнопки — rgba(0, 0, 0, 0,4), то есть цвет фона кнопки — черный, а прозрачность — 0,4. Свойство тени кнопки равно 2px 2px 2px rgba(0, 0, 0, 0,2), то есть тень кнопки имеет размер 2px 2px 2px черного цвета, а прозрачность равна 0,2.
На этом завершается статья о примере кода панорамной карусели HTML+CSS. Чтобы получить дополнительную информацию о содержимом панорамной карусели HTML+CSS, выполните поиск по предыдущим статьям на сайте downcodes.com или продолжайте просматривать следующие статьи по теме. Надеюсь, вы все поддержите downcodes.com. больше в будущем!