欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

HTML+CSS實現(xiàn)全景輪播的示例代碼

  發(fā)布時間：2024-02-02 15:43:31   作者：若冰說   我要評論
本文主要介紹了HTML+CSS實現(xiàn)全景輪播的示例代碼，實現(xiàn)了一個簡單的網(wǎng)頁布局，其中包含了五個不同的盒子，每個盒子都有一個不同的背景圖片，并且它們之間有一些間距，下面就來詳細(xì)的介紹一下

效果演示

實現(xiàn)了一個簡單的網(wǎng)頁布局，其中包含了五個不同的盒子，每個盒子都有一個不同的背景圖片，并且它們之間有一些間距。當(dāng)鼠標(biāo)懸停在某個盒子上時，它的背景圖片會變暗，并且文字會變成白色。這些盒子和按鈕都被放在一個容器中，整個頁面看起來像一個畫廊。

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é)流處理 (保證動畫執(zhí)行過程，按鈕不被重復(fù)點擊)
leftBtn.addEventListener("click", () => {
  if (openClick) {
    openClick = false // 觸發(fā)點擊后，禁用按鈕
    const items = document.querySelectorAll(".item")
    slide.prepend(items[items.length - 1])
    setTimeout(() => openClick = true, 1000) // 1s 再開放按鈕的點擊
  }
})
rightBtn.addEventListener("click", () => {
  if (openClick) {
    openClick = false
    const items = document.querySelectorAll(".item")
    slide.appendChild(items[0])
    setTimeout(() => openClick = true, 1000)
  }
})

實現(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è)置容器的溢出屬性為隱藏，即超出容器范圍的元素不會被顯示出來。

.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è)置盒子的邊框半徑為10px，即盒子的圓角。盒子的背景圖片大小為cover，即覆蓋整個盒子。背景圖片的位置為居中對齊。最后，設(shè)置盒子的過渡效果為1秒，即過渡效果的時間為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è)置第一個和第二個盒子的CSS樣式，包括將它們的位置設(shè)置為0，即它們覆蓋在容器的最上層。同時，將它們的高度設(shè)置為100%，即它們覆蓋在容器的整個高度。最后，將它們的變換屬性設(shè)置為 translateY(0)，即它們不會向下移動。同時，將它們的陰影和邊框半徑設(shè)置為0，即它們沒有陰影和邊框。

.item:nth-child(3) {
  left: 70%;
}

這段代碼是設(shè)置第三個盒子的CSS樣式，包括將它的位置設(shè)置為距離容器左側(cè)70%的位置。

.item:nth-child(4) {
  left: calc(70% + 250px);
}

這段代碼是設(shè)置第四個盒子的CSS樣式，包括將它的位置設(shè)置為距離第三個盒子右側(cè)250px的位置。

.item:nth-child(5) {
  left: calc(70% + 500px);
}

這段代碼是設(shè)置第五個盒子的CSS樣式，包括將它的位置設(shè)置為距離第三個盒子右側(cè)500px的位置。

.item:nth-child(n+6) {
  left: calc(70% + 750px);
  opacity: 0;
}

這段代碼是設(shè)置所有盒子的CSS樣式，包括將它們的位置設(shè)置為距離第三個盒子右側(cè)750px的位置。同時，將它們的不透明度設(shè)置為0，即它們不可見。

.buttons {
  width: 100%;
  position: absolute;
  bottom: 50px;
  margin-left: -50px;
  text-align: center;
  display: flex;
  justify-content: center;
}

這段代碼是設(shè)置按鈕的CSS樣式，包括設(shè)置按鈕的寬度為100%，即按鈕的大小與容器相同。同時，將按鈕的位置設(shè)置為距離容器底部50px的位置。最后，將按鈕的對齊方式設(shè)置為居中對齊，即按鈕在水平方向上居中對齊。

.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è)置按鈕的行高為50px，即按鈕的高度。按鈕的文本對齊方式為居中對齊，即文本在水平方向上居中對齊。按鈕的邊框半徑為5px，即按鈕的圓角。按鈕的外邊距為0 25px，即按鈕在水平方向上左右兩側(cè)的距離為25px。按鈕的過渡效果為0.5秒，即過渡效果的時間為0.5秒。按鈕的光標(biāo)屬性為pointer，即鼠標(biāo)懸停在按鈕上時，鼠標(biāo)的形狀會變成手型。按鈕的用戶選擇屬性為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實現(xiàn)全景輪播的示例代碼的文章就介紹到這了,更多相關(guān)HTML CSS全景輪播內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

  • HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊

    這篇文章主要介紹了HTML5+css3：3D旋轉(zhuǎn)木馬效果相冊，主要運用了perspective和tranlateY這兩個知識點，有需要的可以了解一下。
    2017-01-03

  • 純HTML和CSS實現(xiàn)JD輪播圖效果

    這篇文章主要介紹了純HTML和CSS實現(xiàn)JD輪播圖效果,需要的朋友可以參考下
    2018-06-01

  • html5+css如何實現(xiàn)中間大兩頭小的輪播效果

    這篇文章主要介紹了html5+css如何實現(xiàn)中間大兩頭小的輪播效果的相關(guān)資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-12-06

  • HTML+CSS+JS實現(xiàn)堆疊輪播效果的示例代碼

    這篇文章主要介紹了HTML+CSS+JS實現(xiàn)堆疊輪播效果，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2020-09-08

  • HTML5輪播圖全代碼

    這篇文章主要介紹了HTML5輪播圖全代碼,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2021-04-22

最新評論