仿写笔记-名单卡片

效果

可以左右滑动的名单卡片

实现

html 先使用静态数据完成静态页面

    <div class="big_div">
        <p>班级成员</p>
        <div class="window_boxs_character">
            <button class="box_left"><img src="img/left.png" alt=""></button>
            <div class=" box_character">
                <img src="img/001.jpg" alt="1">

                <span>111</span>
            </div>
            <div class="box_character">
                <img src="img/002.jpg" alt="1">
                <span>222</span>
            </div>
            <div class="box_character">
                <img src="img/004.jpg" alt="1">
                <span>222</span>
            </div>
            <div class="box_character">
                <img src="img/004.jpg" alt="1">
                <span>222</span>
            </div>
            <button class="box_left box_right"><img src="img/left.png" alt=""></button>
        </div>
    </div>

css 为页面设置具体的样式，名片内容框简单使用flex布局

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "PingFang SC", "Microsoft Yahei", sans-serif;
            text-decoration: none;
            scroll-behavior: smooth;
        }

        span:hover {
            transform: scale(1.05);
        }

        .box_character {
            flex: 1;
            overflow: hidden;
            transition: .5s;
            margin: 0 20px;
            box-shadow: 10px 10px 20px rgba(0, 0, 0, .5);
            border-radius: 20px;
            border: 10px solid #fff;
            background-color: #fff;
        }

        .box_character>img {
            width: 100%;
            height: 60%;
            object-fit: cover;
            transition: .5s;
        }

        .box_character>span {
            font: 200 45px '优设标题黑';
            text-align: center;
            height: 40%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .window_boxs_character {
            width: 90%;
            height: 500px;
            display: flex;
            top: 200px;
            margin: 10px auto;
            margin-top: 10px;
            margin-bottom: 100px;

        }

        .big_div {
            width: 90%;
            margin: auto;
            text-align: center;
            border: 1px solid rgb(0, 0, 0);
            margin-top: 100px;
            background-color: rgb(255, 255, 255);
            border-radius: 5px;
            box-shadow: 20px 20px 60px #bebebe,
                -20px -20px 60px #ffffff;
        }

        .box_left {
            background-color: #fff;
            border: 10px solid #fff;
        }

        .box_left>img {
            width: 100px;
        }

        .box_right>img {
            transform: rotate(180deg); 
        }

js 简单实现左右滑动的效果

   const boxs = document.getElementsByClassName('box_character');
        const leftBtn = document.querySelector('.box_left');
        const rightBtn = document.querySelector('.box_right');
        const items = [
            { src: "img/001.jpg", name: "1", work: "" },
            { src: "img/002.jpg", name: "2", work: "" },
            { src: "img/003.jpg", name: "3", work: "" },
            { src: "img/004.jpg", name: "4", work: "" },
            { src: "img/001.jpg", name: "5", work: "" },
            { src: "img/002.jpg", name: "6", work: "" },
        ]


        let leftIndex = 0;

        const load = () => {
            for (let i = 0; i < 4; i++) {
                boxs[i].querySelector('img').src = items[leftIndex + i].src;
                boxs[i].querySelector('span').innerText = items[leftIndex + i].name;
            }
        }
        load();
        leftBtn.onclick = function () {
            if (leftIndex == 0) return;
            console.log(111);
            leftIndex--;
            load();
        }

        rightBtn.onclick = function () {
            if (leftIndex + 3 === items.length - 1) return;
            console.log(leftIndex + 3);
            leftIndex++;
            load();
        }

总结

较为简单,主要是布局和一些效果的实现，预将其应用于毕设的班级学生展示功能，同时添加点击事件跳转至对应个人主页