HTML+CSS+JS 全景轮播

admin 2024-08-11 149 阅读 0评论

实现了一个全景轮播的效果，包括多张图片在容器中的轮播展示，以及左右按钮的控制。其中，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)
    }
})

实现思路拆分

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

设置第三个轮播图项的位置。

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

设置第六个及以后轮播图项的透明度为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;

获取左右按钮和轮播容器元素，设置openClick变量用于控制点击事件。

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)
    }
})