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

1. 鼠标划在左半部分出现左箭头切换，鼠标划在右半部分出现右箭头切换。
2. 点击数字播放，当前播放页数字背景透明度为1，非当前页透明度为0.6
3. 点击缩略图播放，当前播放页缩略图透明度为1，非当前页缩略头透明度为0.3
4. 间隔2000ms自动播放（包括图片、数字、缩略图）。

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

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

                          
    
      
     
        
      
        
      
        
      
        
      
        
      
        
      
      
     
      
     <      
     >      
     
      
     
      
     
        
      
1
        
      
2
        
      
3
        
      
4
        
      
5
        
      
6
      
     
      
     
        
      
        
      
        
      
        
      
        
      
        
      
      
     
    
    
  

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)}