zoukankan      html  css  js  c++  java
  • 轮播图 -- 最简陋--原生

    <!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>Document</title>
        </head>
        <style>
            li {
                list-style: none;
                float: left;
                box-sizing: border-box;
            }

            li div {
                 400px;
                height: 200px;
                text-align: center;
                font-size: 50px;
                line-height: 200px;
            }

            .box {
                position: relative;
                 400px;
                height: 200px;
                margin: 0 auto;
                margin-top: 100px;
                border: 3px solid saddlebrown;
                overflow: hidden;
            }

            .container {
                padding: 0;
                margin: 0;
                position: absolute;
                z-index: -10;
                 200000px;
                left: 0;
                transition: all cubic-bezier(0.88, 0.03, 0.01, 0.96) 0.8s;
            }

        </style>

        <body>
            <div class="box">
                <ul id="container" class="container">
                    <li>
                        <div style="lightblue;">
                            1
                        </div>
                    </li>
                    <li>
                        <div style="lightskyblue;">
                            2
                        </div>
                    </li>
                    <li>
                        <div style="lightgray;">
                            3
                        </div>
                    </li>
                    <li>
                        <div style="lightcoral;">
                            4
                        </div>
                    </li>
                    <li>
                        <div style="lawngreen;" alt="">
                            5
                        </div>
                    </li>
                </ul>
            </div>
        </body>
        <script type="text/javascript">
            var num = 0;
            var Carousel = function () {

                num = num - 400
                if (num == -2000) {
                    return num = 400
                }
                document.getElementById('container').style.left = num + 'px'
            }
            setInterval(Carousel, 2000)
        </script>

    </html>
  • 相关阅读:
    dotnet core 获取 MacAddress 地址方法
    dotnet core 获取 MacAddress 地址方法
    dotnet core 发布只带必要的依赖文件
    dotnet core 发布只带必要的依赖文件
    Developing Universal Windows Apps 开发UWA应用 问答
    Developing Universal Windows Apps 开发UWA应用 问答
    cmd 如何跨驱动器移动文件夹
    cmd 如何跨驱动器移动文件夹
    C++ 驱动开发 error LNK2019
    C++ 驱动开发 error LNK2019
  • 原文地址:https://www.cnblogs.com/niluiquhz/p/8876365.html
Copyright © 2011-2022 走看看