1、一直来说轮播图都是困扰刚进业内小白的一大难点，因为我们不仅需要自己作出一个比较完美的运动框架（虽然网上一抓一大把，但是哪有比自己做出来实现的有成就感，不是吗？^_^），还必须需要非常关键性的把握住轮播的原理，这样才能把一个轮播图完美的呈现出来。
2、废话不多说，请看下面代码
1 //首先我们必须都明确，一个好的运动框架那必须是能够同时承载两种或多种以上需求的，所以我们应该避免单运动框架通过行内样式的局限性，就需要我们知道怎么去获取非行间样式 2 function getStyle(obj,attr){ 3 if(obj.currentStyle){ 4 return obj.currentStyle[attr]; 5 }else{ 6 return getComputedStyle(obj,false)[attr] 7 } 8 } 9 //以上我们用函数去封装一个获取非行间样式的方法方便我们以后使用 10 11 //开始封装运动框架 12 function move(obj,json,fn){ 13 clearInterval(obj.timer) 14 obj.timer =setInterval(function(){ 15 var bStop = true; 16 for(var attr in json){ 17 var initialVal = 0; 18 if(attr == "opacity"){ 19 initialVal = parseInt(parseFloat(getStyle(obj,attr))*100); 20 }else{ 21 initialVal = parseInt(getStyle(obj,attr)); 22 } 23 var speed = (json[attr]-initialVal)/8; 24 speed = speed>0?Math.ceil(speed):Math.floor(speed); 25 if(initialVal != json[attr]){ 26 bStop = false; 27 } 28 if(attr == "opacity"){ 29 obj.style.opacity = (initialVal+speed)/100; 30 obj.style.filter = "alpha(opacity:"+(initialVal+speed)+")"; 31 }else{ 32 obj.style[attr] = initialVal+speed+"px"; 33 } 34 if(bStop){ 35 clearInterval(obj.timer); 36 fn && fn(); 37 } 38 } 39 },30) 40 } 41 //上面一个运动框架就做好了,现在只需要我们调用即可,当然这种类型的框架还不是最完美的,有些功能还无法实现,所以我上面一直说比较完美,但这已经足够用啦...