HTML+CSS+JS 全景轮播

效果图动态：

实现了一个全景轮播的效果，包括多张图片在容器中的轮播展示，以及左右按钮的控制。其中，CSS实现了图片的布局和样式，JavaScript实现了左右按钮的点击事件，以及图片的切换。

Code
HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>全景轮播</title>
    <link rel="stylesheet" href="./56-全景轮播.css">
</head>

<body>
    <div class="container">
        <div id="slide">
            <div class="item" style="background-image:url('./images/01.jpg')"></div>
            <div class="item" style="background-image:url('./images/02.jpg')"></div>
            <div class="item" style="background-image:url('./images/03.jpg')"></div>
            <div class="item" style="background-image:url('./images/04.jpg')"></div>
            <div class="item" style="background-image:url('./images/05.jpg')"></div>
            <div class="item" style="background-image:url('./images/06.jpg')"></div>
        </div>
        <div class="buttons">
            <div class="left">
                < Prev</div>
                    <div class="center">下载壁纸</div>
                    <div class="right">Next ></div>
            </div>
        </div>
        <script src="./56-全景轮播.js"></script>
</body>

</html>

CSS

* {
    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);
}

JavaScript

const leftBtn = document.querySelector(".buttons .left")
const rightBtn = document.querySelector(".buttons .right")
const slide = document.querySelector("#slide")
let openClick = true // 节流处理 (保证动画执行过程，按钮不被重复点击)

leftBtn.addEventListener("click", () => {
    if (openClick) {
        openClick = false // 触发点击后，禁用按钮
        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)
    }
})

HTML+CSS+JS 全景轮播

猜你喜欢