纵向轮播图的封装

本人纯原生手写！！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        a{text-decoration: none;}
        .container{
            position: relative;
            width: 360px;
            height: 660px;
            margin:300px auto 0 auto;
            background-color: #666;
            box-shadow: 0 0 5px green;
            overflow: hidden;
        }
        .wrap{
            position: absolute;
            height: 1428px;
            width: 308px;
            z-index: 1;
            background-color: purple;
            margin-left: 26px;
        }
        .img{
            /* float: left; */
            width: 308px;
            height: 178px;
            line-height: 178px;
            font-size: 50px;
            text-align: center;
            margin-top: 26px;
        }

        .arrow{
            position: absolute;
            width: 110px;
            height: 30px;
            line-height: 30px;
            border: 1px solid #C2000B;
            font-size: 24px;
            border-radius: 10px;
            bottom: 5px;
            z-index: 2;
            padding:0px 14px;
            color: red;
            background-color: rgba(0,0,0,0.2);
            text-align: center;
        }
        .arrow_top{
            left: 26px;
            background-color: #fff;
        }
        .arrow_bottom{
            right: 26px;
            color: #fff;
            background-color: #C2000B;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="wrap" style="top: -204px">
            <div class="img" style="background: cyan;">5</div>
            <div class="img" style="background: red;">1</div>
            <div class="img" style="background: orange;">2</div>
            <div class="img" style="background: yellow;">3</div>
            <div class="img" style="background: green;">4</div>
            <div class="img" style="background: cyan;">5</div>
            <div class="img" style="background: red;">1</div>
        </div>
        <a href="javascript:;" class="arrow arrow_top">↓</a>
        <a href="javascript:;" class="arrow arrow_bottom">↑</a>
    </div>
</body>
<script>
    var wrap = document.querySelector('.wrap');
    var next = document.querySelector('.arrow_top');
    var prev = document.querySelector('.arrow_bottom');
    console.log(wrap, prev, next);

    next.onclick = function () {
        console.log('下');
        next_pic();
    }
    prev.onclick = function () {
        console.log('上');
        prev_pic();
    }
    // 点击下一张
    function next_pic () {
        var newTop;
        if (wrap.style.top === '-816px') {
            newTop = 0;
        } else {
            newTop = parseInt(wrap.style.top) -204;
        }
        wrap.style.top = newTop + "px";
    }

    // 点击上一张
    function prev_pic () {
        var newTop;
        if (wrap.style.top === "0px") {
            newTop = -816;
        } else {
            newTop = parseInt(wrap.style.top) + 204;
        }
        wrap.style.top = newTop + "px";
    }
</script>
</html>
posted on 2020-10-20 11:34 取个名字真wff 阅读(78) 评论(0) 收藏举报