第41天：匀速、缓动运动和图片无缝滚动

最新推荐文章于 2025-07-26 13:57:18 发布

lelara

最新推荐文章于 2025-07-26 13:57:18 发布

阅读量114

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/lelara/article/details/84577726

javascript 专栏收录该内容

68 篇文章

订阅专栏

本文介绍了使用HTML和JavaScript实现缓动动画效果的方法，并通过一个具体示例展示了如何让一个元素从页面的一侧平滑地移动到另一侧。此外，还提供了一个图片无缝滚动的示例，展示了如何创建一个无限循环的图片轮播效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，匀速运动和缓动运动

缓动运动
公式：leader = leader +（target-leader）/ 10; //前导为初始值0，目标为结束值，10可以改变，值越大，速度越慢

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>运动</title>
 6     <style>
 7         .box{
 8             width: 200px;
 9             height: 200px;
10             background-color: yellow;
11             position: absolute;
12             top:100px;
13             left:0;
14         }
15     </style>
16 </head>
17 <body>
18     <button id="btn">开始</button>
19     <div class="box" id="Box"></div>
20 </body>
21 <script>
22     var btn=document.getElementById("btn");
23     var box=document.getElementById("Box");
24     //匀速运动
25    /* var timer=null;
26     var num=0;
27     btn.onclick=function(){
28         timer=setInterval(function(){
29             num++;
30             if(num>500){
31                 clearInterval(timer);
32             }else{
33                 box.style.left=num+"px";
34             }
35 36         },10);
37     }*/
38 
39    // 缓动运动
40     var leader=0;
41     var target=500;
42     btn.onclick=function(){
43         setInterval(function(){
44             leader=leader+(target-leader)/10;//速度逐渐变慢
45             box.style.left=leader+"px";
46         },10)
47     }
48 </script>
49 </html>

二，图片无缝滚动

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片无缝滚动</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11         ul{
12             list-style: none;
13         }
14         img{
15             vertical-align: top;
16         }
17 
18         .box{
19             width: 600px;
20             height: 200px;
21             background-color: pink;
22             margin:100px auto;
23             position: relative;
24             overflow: hidden;
25         }
26         .box ul{
27             width: 400%;
28             position: absolute;
29             left: 0;
30             top:0;
31         }
32         .box ul li{
33 
34             float: left;
35         }
36     </style>
37 </head>
38 <body>
39     <div class="box" id="scroll">
40         <ul >
41             <li><img src="images/01.jpg" alt=""></li>
42             <li><img src="images/02.jpg" alt=""></li>
43             <li><img src="images/03.jpg" alt=""></li>
44             <li><img src="images/04.jpg" alt=""></li>
45             <li><img src="images/01.jpg" alt=""></li>
46             <li><img src="images/02.jpg" alt=""></li>
47         </ul>
48     </div>
49 </body>
50 <script>
51     var scroll=document.getElementById("scroll");//大盒子
52     var ul=scroll.children[0];
53     var num=0;//控制左侧的值 left
54     var timer=null;//存定时器
55     timer=setInterval(autoPlay,5);
56     function autoPlay(){
57         num--;
58         num<=-1200?num=0:num;
59         ul.style.left=num+"px";
60     }
61 
62     scroll.onmouseover=function(){//鼠标经过大盒子 停止滚动
63         clearInterval(timer);
64     }
65     scroll.onmouseout=function(){
66         timer=setInterval(autoPlay,5);//鼠标离开 开始滚动
67 
68     }
69 </script>
70 </html>
运行效果：