码迷,mamicode.com
首页 > Web开发 > 详细

原生js实现一个简单轮播效果

时间:2018-04-29 23:55:54      阅读:284      评论:0      收藏:0      [点我收藏+]

标签:bsp   一个   dde   head   ul li   type   flow   color   float   

代码简单,直接上:

<!DOCTYPE html>
<html>
<head>

    <title>轮播</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        padding:0;
        margin:0;
    }
        .mainCss{
            width:100px;
            height: 200px;
            position: relative;
            overflow: hidden;

        }
        ul{
            width:300px;
            height: 200px;
            position: absolute;

        }
        ul li{
            float: left;
            width: 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>

 

原生js实现一个简单轮播效果

标签:bsp   一个   dde   head   ul li   type   flow   color   float   

原文地址:https://www.cnblogs.com/xingguozhiming/p/8972302.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!