轮播图移动速度（匀速，缓动）案例归总

共创splendid--与您携手

已于 2022-07-12 11:16:09 修改

阅读量434

点赞数 4

分类专栏： JavaScript 文章标签： javascript

于 2022-07-07 13:54:48 首次发布

关注博主，为您提供更优质的作品与最全的知识内容

本文链接：https://blog.csdn.net/m0_59505309/article/details/125657658

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

js内容部分：

以上是使轮播图匀速与缓动的js效果，下面提取。在编程的过程中可以提取其中的函数，直接调用即可。

提取部分：

匀速

   //匀速
       function move(obj,target){
               obj.myInter = setInterval(function(){
                   //第一步获取当前居左边的距离
                   var offsetLeft = obj.offsetLeft;
                   var num = 10;//走10px
                   if(offsetLeft==target){
                       clearInterval(obj.myInter);//清除定时器
                   }else{
                       obj.style.left = offsetLeft + num + "px";
                   }
               },1000)
       }

缓动：

//缓动
       function slow(obj,target){
               obj.myInter = setInterval(function(){
                   //第一步获取当前居左边的距离
                   var offsetLeft = obj.offsetLeft;
                   var num = (target - offsetLeft)/10;
                   num>0?num = Math.ceil(num):num=Math.floor(num);

                   if(offsetLeft==target){
                       clearInterval(obj.myInter);//清除定时器
                   }else{
                       obj.style.left = offsetLeft + num + "px";
                   }
               },500)
       }