CSS动画轮播效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/FORGIVE66/article/details/106298637

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>第五题</title>

    <style>

        .content {

            width: 400px;

            height: 400px;

            margin: 0 auto;

            position: relative;

            overflow: hidden;

            border: 1px solid black;

        }



        .box {

            width: 1200px;

            height: 400px;

        }



        .box1 {

            width: 400px;

            height: 400px;

            float: left;

            background-color: rgb(130, 243, 111);

        }



        .box2 {

            width: 400px;

            height: 400px;

            background-color: cadetblue;

            float: left;

        }



        .box3 {

            width: 400px;

            height: 400px;

            background-color: rgb(238, 129, 102);

            float: left;

        }

    </style>

</head>



<body>

    <div class="content">

        <div class="box">

            <div class="box1">第一页</div>

            <div class="box2">第二页</div>

            <div class="box3">第三页</div>

        </div>

    </div>

</body>

<script>

    window.onload = function () {

        var box = document.querySelector(".box");

        var num = 0;

        setInterval(function () {

            num++;

            var boxlen = 0;

            if (num == 3) {

                num = 0;

                boxlen = 0

            }

            else {

                boxlen = num * 400

            }

            console.log(num)

            box.style.cssText = "transform: translate3d(-" + boxlen + "px,0,0);transition : 1000ms";

        }, 3000);

     }

</script>

</html>

JS原生代码写轮播图