javascript手写轮播图播放效果

LuDongWei 发布于2019-08-23 11:37 / 3439人阅读

摘要：早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像和等前端框架中都有封装好的特效，直接拿过来使用就可以了。下面我们用原生代码来手写一个轮播图的特效。

早前做轮播图的时候，我们习惯在网上找一些现成的例子修改修改使用。现在做轮播图，像bootstrap和iview等前端框架中都有封装好的特效，直接拿过来使用就可以了。但是轮播图是怎么做的呢。下面我们用原生代码来手写一个轮播图的特效。
实现效果如下：（图片来自网络）

实现功能如下：

鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。

点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6

点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3

间隔2000ms自动播放（包括图片、数字、缩略图）。

根据前面运动知识，实现代码如下：

我们把前面总结的运动框架封装在move.js中

move.js

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle[name];
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

function startMove(obj, attr, iTarget) {
  clearInterval(obj.timer);
  obj.timer = setInterval(function() {
    var cur=0;
    if(attr==="opacity"){
      cur=Math.round(parseFloat(getStyle(obj,attr))*100);//有可能会出现误差0.07*100
    }
    else{
      cur=parseInt(getStyle(obj,attr));
    }
    var speed = (iTarget - cur) / 6;
    speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
    if (cur === iTarget) {
      clearInterval(obj.timer);
    } else {
      if(attr==="opacity"){
        obj.style.filter="alpha(opacity:"+cur+speed+")";
        obj.style.opacity=(cur+speed)/100;
      }else{
        obj.style[attr]=cur+speed+"px";
      }
    }
  }, 30)
}

GPU云服务器云服务器 javascript轮播图轮播图写轮播图将轮播图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97218.html

手把手教你用原生JavaScript造轮子（2）——轮播图（更新：ES6版本）

摘要：绑定轮播事件然后是鼠标移入移出事件的绑定鼠标移入移出事件移入时停止轮播播放的定时器，移出后自动开始下一张的播放。通过上一篇文章的学习，我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图，希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Lets begin! 目前项目使用 ES5及UMD 规范封装，所以在前端暂时只支持标签的引入方式...

jasperyang 2019-08-23 10:57 评论0 收藏0
JS基础入门篇（十三）—定时器

摘要：但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。，通过传入定时器的编号来。清除定时器，再开启定时器。所以，每次打开定时器，先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器定义：当我们需要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。我们可以使用定时器。使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些...

kaka 2019-08-29 15:31 评论0 收藏0
JS基础入门篇（十三）—定时器

摘要：但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。，通过传入定时器的编号来。清除定时器，再开启定时器。所以，每次打开定时器，先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器定义：当我们需要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。我们可以使用定时器。使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些...

BenCHou 2019-08-22 17:33 评论0 收藏0
JS基础入门篇（十三）—定时器

摘要：但是定时器没关。通过变量来控制定时器内函数的执行停止播放默认为。方式三通过关闭定时器来停止轮播图的运动。，通过传入定时器的编号来。清除定时器，再开启定时器。所以，每次打开定时器，先清除前一个。点击页面任何一个位置关闭定时器。 1.定时器定义：当我们需要隔一段时间，再执行一段代码。或者每隔一段时间，执行一段代码。我们可以使用定时器。使用场景：例如网站轮播图的自动滚动。广告延迟弹出的某些...

ermaoL 2019-08-02 10:32 评论0 收藏0
回顾自己三次失败的面试经历

摘要：站在这个时间点上，我对自己之前三次失败的面试经历做了一次深度回顾。关于我第三次面试失败的经历，依然是与轮播图有关。当然，这次思特奇面试之旅，最后也是以失败告终，这也是我离进大厂最近的一次。 showImg(https://segmentfault.com/img/bVYQuP?w=528&h=513); 前言时间的齿轮已经来到了2017年的11月份，距离2018年仅仅还剩下不到两...

DC_er 2019-08-21 17:42 评论0 收藏0