js_定时器- 轮播案例

最新推荐文章于 2024-11-08 19:00:00 发布

粪坑里的石头

最新推荐文章于 2024-11-08 19:00:00 发布

阅读量310

点赞数

分类专栏： html

本文链接：https://blog.youkuaiyun.com/haohao143/article/details/82890200

版权

html 专栏收录该内容

7 篇文章

订阅专栏

<!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>
 <style>
      * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

 #aaa { width: 100px; height: 100px; background: aqua; 
    position: absolute;
    top: 0px;
    left:0px;}
 
 </style>


    <script>   
        window.onload= function(){
          
            
            var aaa = document.getElementById("aaa")
            var num = 0
            var sudu =0

            setInterval( fn, 20)
              

                function fn(){
               

                    num += sudu
                    aaa.style.left = num + 'px'

                         
                    if(num <= 0){ sudu = +5 }
                
                    if (num >=500){  sudu = -5  }
                                
                }
       
        }
    
    </script>
    </script>
    </script>
</head>
<body>
    

<div id = "aaa"> </div>


</body>
</html>

在这里插入图片描述