1、js原生实现移动端手指滑动轮播图效果(2)

最新推荐文章于 2021-02-08 12:58:29 发布

原创

最新推荐文章于 2021-02-08 12:58:29 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <title>1、js原生实现移动端手指滑动轮播图效果(2)</title>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <style>
        *{
            margin: 0;
            padding: 0;
        }

        html, body {
            height: 100%;
            width: 100%;
        }

        ul, ol {
            list-style: none;
        }

        /*清除浮动*/
        .clearfix:before, .clearfix:after {
            content: "";
            display: table;
            visibility: hidden;
            height: 0;
            clear: both;
        }
        .box{
            height: 50vh;
            width: 100vw;
            background: red;
        }
        .box1{
            background: yellow;
        }
        .box2{
            background: yellowgreen;
        }
        .box3{
            background: cyan;
        }
        .box4{
            background: orange;
        }
        /*轮播图*/
        .wrpa-w {
            padding-top: 0 !important;
        }

        .banner {
            width: 100%;
            position: relative;