js 无缝连接的轮播图

柔光的暖阳◎ 2022-03-11 08:15 318阅读 0赞

> <!DOCTYPE html>  
> <html lang="zh-cn">  
> <head>  
>     <meta charset="UTF-8">  
>     <title>Document</title>  
>     <style>  
>         \* \{  
>             margin: 0;  
>             padding:0;  
>         \}
> 
>         ul \{  
>             list-style: none;  
>         \}
> 
>         img \{  
>             vertical-align: top;  
>         \}
> 
>         /\*取消图片底部3像素距离\*/  
>         .box \{  
>             width: 300px;  
>             height: 200px;  
>             margin: 100px auto;  
>             background-color: pink;  
>             border: 1px solid red;  
>             position: relative;  
>             overflow: hidden;  
>         \}
> 
>         .box ul li \{  
>             float: left;  
>         \}
> 
>         .box ul \{  
>             width: 1500px;  
>             position: absolute;  
>             left: 0;  
>             top: 0;  
>         \}  
>     </style>  
> </head>  
> <body>  
>     <div class="box" id="screen">  
>         <ul>  
>             <li><img src="images/01.jpg" alt=""></li>  
>             <li><img src="images/02.jpg" alt=""></li>  
>             <li><img src="images/03.jpg" alt=""></li>  
>             <li><img src="images/04.jpg" alt=""></li>  
>         </ul>  
>     </div>  
>     <script>  
>     function my$(idName) \{  
>         return document.getElementById(idName);  
>     \}
> 
>         var current = 0; //只声明一次  
>         function f1(argument) \{  
>             var ulObj = my$("screen").children\[0\];  
>             current -= 10;  
>             if(current < -1200) \{  
>                 ulObj.style.left = 0 + "px";  
>                 current = 0;  
>             \}  
>             else \{  
>                 ulObj.style.left = current + "px";  
>             \}  
>         \}
> 
>         var timeId = setInterval(f1,20);
> 
>         my$("screen").onmouseover = function() \{  
>             //停止  
>             clearInterval(timeId);  
>         \};
> 
>         my$("screen").onmouseout = function() \{  
>             //继续  
>             timeId = setInterval(f1,20);  
>         \};  
>     </script>  
> </body>  
> </html>