HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼
我要評(píng)論效果演示
實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的網(wǎng)頁(yè)布局，其中包含了五個(gè)不同的盒子，每個(gè)盒子都有一個(gè)不同的背景圖片，并且它們之間有一些間距。當(dāng)鼠標(biāo)懸停在某個(gè)盒子上時(shí)，它的背景圖片會(huì)變暗，并且文字會(huì)變成白色。這些盒子和按鈕都被放在一個(gè)容器中，整個(gè)頁(yè)面看起來(lái)像一個(gè)畫(huà)廊。
Code
<div class="container">
<div id="slide">
<div class="item" style="background-image:url('./img/章若楠01.jpg')"></div>
<div class="item" style="background-image:url('./img/鞠婧祎01.jpg')"></div>
<div class="item" style="background-image:url('./img/鞠婧祎02.jpg')"></div>
<div class="item" style="background-image:url('./img/鞠婧祎06.jpg')"></div>
<div class="item" style="background-image:url('./img/鞠婧祎04.jpg')"></div>
<div class="item" style="background-image:url('./img/鞠婧祎07.jpg')"></div>
</div>
<div class="buttons">
<div class="left">
< Prev</div>
<div class="center">下載壁紙</div>
<div class="right">Next ></div>
</div>
</div>
</div>* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}
.item:nth-child(3) {
left: 70%;
}
.item:nth-child(4) {
left: calc(70% + 250px);
}
.item:nth-child(5) {
left: calc(70% + 500px);
}
.item:nth-child(n+6) {
left: calc(70% + 750px);
opacity: 0;
}
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition: .5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: 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 slide = document.querySelector("#slide")
let openClick = true // 節(jié)流處理 (保證動(dòng)畫(huà)執(zhí)行過(guò)程，按鈕不被重復(fù)點(diǎn)擊)
leftBtn.addEventListener("click", () => {
if (openClick) {
openClick = false // 觸發(fā)點(diǎn)擊后，禁用按鈕
const items = document.querySelectorAll(".item")
slide.prepend(items[items.length - 1])
setTimeout(() => openClick = true, 1000) // 1s 再開(kāi)放按鈕的點(diǎn)擊
}
})
rightBtn.addEventListener("click", () => {
if (openClick) {
openClick = false
const items = document.querySelectorAll(".item")
slide.appendChild(items[0])
setTimeout(() => openClick = true, 1000)
}
})實(shí)現(xiàn)思路拆分
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}這段代碼是設(shè)置全局的CSS樣式，包括設(shè)置元素的盒模型為border-box，即盒模型的寬度和高度包括了元素的邊框和內(nèi)邊距，而不是只包括元素的內(nèi)容。
.container {
width: 100vw;
height: 100vh;
position: relative;
overflow: hidden;
}這段代碼是設(shè)置容器的CSS樣式，包括設(shè)置容器的寬度和高度為100vw和100vh，即視口的寬度和高度。同時(shí)，設(shè)置容器的定位為相對(duì)定位，即相對(duì)于其父元素進(jìn)行定位。最后，設(shè)置容器的溢出屬性為隱藏，即超出容器范圍的元素不會(huì)被顯示出來(lái)。
.item {
width: 240px;
height: 160px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
border-radius: 10px;
box-shadow: 0 30px 50px #505050;
background-size: cover;
background-position: center;
transition: 1s;
}這段代碼是設(shè)置盒子的CSS樣式，包括設(shè)置盒子的寬度和高度為240px和160px，即盒子的大小。同時(shí)，設(shè)置盒子的定位為絕對(duì)定位，即相對(duì)于其父元素進(jìn)行定位。最后，設(shè)置盒子的邊框半徑為10px，即盒子的圓角。盒子的背景圖片大小為cover，即覆蓋整個(gè)盒子。背景圖片的位置為居中對(duì)齊。最后，設(shè)置盒子的過(guò)渡效果為1秒，即過(guò)渡效果的時(shí)間為1秒。
.item:nth-child(1),
.item:nth-child(2) {
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: translateY(0);
box-shadow: none;
border-radius: 0;
}這段代碼是設(shè)置第一個(gè)和第二個(gè)盒子的CSS樣式，包括將它們的位置設(shè)置為0，即它們覆蓋在容器的最上層。同時(shí)，將它們的高度設(shè)置為100%，即它們覆蓋在容器的整個(gè)高度。最后，將它們的變換屬性設(shè)置為 translateY(0)，即它們不會(huì)向下移動(dòng)。同時(shí)，將它們的陰影和邊框半徑設(shè)置為0，即它們沒(méi)有陰影和邊框。
.item:nth-child(3) {
left: 70%;
}這段代碼是設(shè)置第三個(gè)盒子的CSS樣式，包括將它的位置設(shè)置為距離容器左側(cè)70%的位置。
.item:nth-child(4) {
left: calc(70% + 250px);
}這段代碼是設(shè)置第四個(gè)盒子的CSS樣式，包括將它的位置設(shè)置為距離第三個(gè)盒子右側(cè)250px的位置。
.item:nth-child(5) {
left: calc(70% + 500px);
}這段代碼是設(shè)置第五個(gè)盒子的CSS樣式，包括將它的位置設(shè)置為距離第三個(gè)盒子右側(cè)500px的位置。
.item:nth-child(n+6) {
left: calc(70% + 750px);
opacity: 0;
}這段代碼是設(shè)置所有盒子的CSS樣式，包括將它們的位置設(shè)置為距離第三個(gè)盒子右側(cè)750px的位置。同時(shí)，將它們的不透明度設(shè)置為0，即它們不可見(jiàn)。
.buttons {
width: 100%;
position: absolute;
bottom: 50px;
margin-left: -50px;
text-align: center;
display: flex;
justify-content: center;
}這段代碼是設(shè)置按鈕的CSS樣式，包括設(shè)置按鈕的寬度為100%，即按鈕的大小與容器相同。同時(shí)，將按鈕的位置設(shè)置為距離容器底部50px的位置。最后，將按鈕的對(duì)齊方式設(shè)置為居中對(duì)齊，即按鈕在水平方向上居中對(duì)齊。
.buttons div {
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
border-radius: 5px;
margin: 0 25px;
transition:.5s;
cursor: pointer;
user-select: none;
font-size: 20px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}這段代碼是設(shè)置按鈕的CSS樣式，包括設(shè)置按鈕的寬度為120px，高度為50px，即按鈕的大小。同時(shí)，設(shè)置按鈕的行高為50px，即按鈕的高度。按鈕的文本對(duì)齊方式為居中對(duì)齊，即文本在水平方向上居中對(duì)齊。按鈕的邊框半徑為5px，即按鈕的圓角。按鈕的外邊距為0 25px，即按鈕在水平方向上左右兩側(cè)的距離為25px。按鈕的過(guò)渡效果為0.5秒，即過(guò)渡效果的時(shí)間為0.5秒。按鈕的光標(biāo)屬性為pointer，即鼠標(biāo)懸停在按鈕上時(shí)，鼠標(biāo)的形狀會(huì)變成手型。按鈕的用戶選擇屬性為none，即用戶不能選中按鈕中的文本。按鈕的字體大小為20px，即按鈕的文本大小。按鈕的文本顏色為白色，即按鈕的文本顏色。按鈕的背景顏色為rgba(0, 0, 0, 0.4)，即按鈕的背景顏色為黑色，透明度為0.4。按鈕的陰影屬性為2px 2px 2px rgba(0, 0, 0, 0.2)，即按鈕的陰影為2px 2px 2px黑色，透明度為0.2。
到此這篇關(guān)于HTML+CSS實(shí)現(xiàn)全景輪播的示例代碼的文章就介紹到這了,更多相關(guān)HTML CSS全景輪播內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)
這篇文章主要介紹了HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊(cè)，主要運(yùn)用了perspective和tranlateY這兩個(gè)知識(shí)點(diǎn)，有需要的可以了解一下。2017-01-03
這篇文章主要介紹了純HTML和CSS實(shí)現(xiàn)JD輪播圖效果,需要的朋友可以參考下2018-06-01
html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果
這篇文章主要介紹了html5+css如何實(shí)現(xiàn)中間大兩頭小的輪播效果的相關(guān)資料，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-06
HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果的示例代碼
這篇文章主要介紹了HTML+CSS+JS實(shí)現(xiàn)堆疊輪播效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-09-08- 這篇文章主要介紹了HTML5輪播圖全代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-04-22
