day26-Double Vertical Slider（双垂直滑块轮播图）

最新推荐文章于 2024-08-30 19:43:04 发布

格式化小拓

最新推荐文章于 2024-08-30 19:43:04 发布

阅读量99

点赞数

分类专栏： 50天50个小demo前端文章标签： html5 css3 javascript 前端

本文链接：https://blog.csdn.net/qq_51523316/article/details/131775414

版权

50天50个小demo前端专栏收录该内容

50 篇文章 2 订阅

订阅专栏

50 天学习 50 个项目 - HTMLCSS and JavaScript

day26-Double Vertical Slider（双垂直滑块轮播图）

效果

在这里插入图片描述

index.html

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

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vertical Slider</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <!-- 容器 -->
    <div class="slider-container">
        <!-- 左边部分 文字 -->
        <div class="left-slide">
            <div style="background-color: #FD3555">
                <h1>1.大自然的花</h1>
                <p>全是粉色</p>
            </div>
            <div style="background-color: #2A86BA">
                <h1>2.蓝色天空</h1>
                <p>和山脉</p>
            </div>
            <div style="background-color: #252E33">
                <h1>3.孤独的城堡</h1>
                <p>在荒野中</p>
            </div>
            <div style="background-color: #FFB866">
                <h1>4.飞翔的鹰</h1>
                <p>在夕阳下</p>
            </div>
        </div>
        <!-- 右边部分 图 -->
        <div class="right-slide">
            <div
                style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')">4
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')">3
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')">2
            </div>
            <div
                style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')">1
            </div>
        </div>
        <!-- 按钮 -->
        <div class="action-buttons">
            <!-- 向下 -->
            <button class="down-button">
                <i class="fas fa-arrow-down"></i>
            </button>
            <!-- 向上 -->
            <button class="up-button">
                <i class="fas fa-arrow-up"></i>
            </button>
        </div>
    </div>

    <script src="script.js"></script>
</body>

</html>

style.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
}

/* 容器 宽高跟随窗口大小*/
.slider-container {
    position: relative;
    overflow: hidden;
    width: 100vw;
    height: 100vh;
}

/* 左边部分 */
.left-slide {
    height: 100%;
    /* 占比 */
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 0.5s ease-in-out;
}

/* 左边部分的每一项 */
.left-slide>div {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.left-slide h1 {
    font-size: 40px;
    margin-bottom: 10px;
    margin-top: -30px;
}

/* 右边部分 */
.right-slide {
    height: 100%;
    /* 占比 */
    width: 65%;
    position: absolute;
    top: 0;
    left: 35%;
    transition: transform 0.5s ease-in-out;
}

/* 右边部分的每一项图 */
.right-slide>div {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
}

/* 按钮 */
button {
    background-color: #fff;
    border: none;
    color: #aaa;
    cursor: pointer;
    font-size: 16px;
    padding: 15px;
    outline: none;
}

button:hover {
    color: #222;
}

/* 按钮的位置 */
.slider-container .action-buttons button {
    position: absolute;
    left: 35%;
    top: 50%;
    z-index: 100;
}

/* 向下的按钮 */
.slider-container .action-buttons .down-button {
    /* 向左移动 */
    transform: translateX(-100%);
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* 向上的按钮 */
.slider-container .action-buttons .up-button {
    /* 向上移动 */
    transform: translateY(-100%);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

script.js

// 重点 flex  background transition position
// 1.获取元素节点
const sliderContainer = document.querySelector('.slider-container')//容器
const slideRight = document.querySelector('.right-slide')//右边部分
const slideLeft = document.querySelector('.left-slide')//左边部分
const upButton = document.querySelector('.up-button')//向上按钮
const downButton = document.querySelector('.down-button')//向下按钮
const slidesLength = slideRight.querySelectorAll('div').length//图片的个数
// 当前图片的索引
let activeSlideIndex = 0
// 初始显示对应的文字 通过定位的移动
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`
// 点击事件 切换
upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {
    // 获取容器的高度，即图片显示的高度
    const sliderHeight = sliderContainer.clientHeight
    if (direction === 'up') {//向上
        // 图片索引+1
        activeSlideIndex++
        // 图片为最后一张图时，返回第一张图
        if (activeSlideIndex > slidesLength - 1) {
            activeSlideIndex = 0
        }
    } else if (direction === 'down') {//向下
        // 图片索引-1
        activeSlideIndex--
        // 图片为第一张时，返回最后一张
        if (activeSlideIndex < 0) {
            activeSlideIndex = slidesLength - 1
        }
    }
    // 通过移动右边，左边的y轴方向的定位
    // 右边部分向上移动
    slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)`
    // 左边部分向下移动
    slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)`
}