zoukankan      html  css  js  c++  java
  • 原生js实现一个简单轮播效果

    代码简单,直接上:

    <!DOCTYPE html>
    <html>
    <head>
    
        <title>轮播</title>
        <meta charset="utf-8">
        <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
            .mainCss{
                100px;
                height: 200px;
                position: relative;
                overflow: hidden;
    
            }
            ul{
                300px;
                height: 200px;
                position: absolute;
    
            }
            ul li{
                float: left;
                 100px;
                height: 200px;
                list-style: none;
                text-decoration: none;
            }
    
        </style>
    </head>
    <body>
        <div class="mainCss" id="main">
            <ul id="list">
                <li style="background: red"></li>
                <li style="background: blue"></li>
                <li style="background: yellow"></li>
            </ul>
        </div>
    
        <script type="text/javascript">
            
            var list=document.getElementById('list');
            var left=0;
            //移动
            var move=function(){
                if(left===-200){
                    left=0;
                }else{
                    left-=100;
                }
                list.style.left=left+'px'
            }    
            setInterval(move,1000)
            //document.addEventListener('click',move)
        </script>
    </body>
    </html>
  • 相关阅读:
    课堂训练
    测试用例
    学生空间测试
    图书管理系统为例5w1h
    风险分析
    关于选择方案的练习作业
    图书管理系统需求报告书
    电梯演说模板
    对于敏捷开发的见解
    课堂练习2
  • 原文地址:https://www.cnblogs.com/xingguozhiming/p/8972302.html
Copyright © 2011-2022 走看看