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

Posted mingL

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了原生js实现一个简单轮播效果相关的知识，希望对你有一定的参考价值。

代码简单，直接上：

<!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实现一个简单轮播效果的主要内容，如果未能解决你的问题，请参考以下文章

基于原生js的图片轮播效果简单实现

使用原生js实现轮播图效果

原生js-实现轮播图效果

js原生 JavaScript轮播图渐变淡入淡出效果实现（附代码）

封装一个简单的原生js焦点轮播图插件

原生js写简单轮播图方式１－从左向右滑动