话不多说，请看代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;margin:100px auto 0;} #innerht{width:1200px;height:500px;position:relative;} ul li{position:absolute;top:0;left:0;z-index:1;} ul li img{width:100%;} #corrow{position:absolute;width:100%;top:50%;opacity:0;z-index:99;} #btn_lef,#btn_rig{position:absolute;height:112px;width:76px;top:50%;margin-top:-56px;} #btn_lef{left:0;} #btn_rig{right:0;} </style> </head> <body> <div> <div> <ul> <li><a href="javascript:;" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=dac666f84f6ad05ec026ad655ea0f159" alt=""></a></li> <li><a href="javascript:;" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=89c2213f2b614db88b5724b82dafc02a" alt=""></a></li> <li><a href="javascript:;" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e7969486909c076abf795995bdc3da54" alt=""></a></li> <li><a href="javascript:;" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b404e53a3f4dd7e97438693e8e2d4082" alt=""></a></li> <li><a href="javascript:;" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=ed309dded163d172b53154b2046eb1a2" alt=""></a></li> </ul> <div> <a href="javascript:;"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=206927b03b97b194bc04cdcaf0e10a33" alt=""></a> <a href="javascript:;"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0e84253cccdf667e293522a0a107eeec" alt=""></a> </div> </div> </div> </body> <script type="text/javascript"> (function(window){ function $(id){ return document.getElementById(id); }; //每张图片对应的样式 var tempArr = [ { "width":400, "top":20, "left":50, "opacity":0.2, "zIndex":2 }, { "width":600, "top":70, "left":0, "opacity":0.8, "zIndex":3 }, { "width":800, "top":100, "left":200, "opacity":1, "zIndex":4 }, { "width":600, "top":70, "left":600, "opacity":0.8, "zIndex":3 }, { "width":400, "top":20, "left":750, "opacity":0.2, "zIndex":2 } ]; // 设置限流函数 var onOff = true ; // 获取对象 var left = $("btn_lef"),right = $("btn_rig"),innerht = $("innerht"),ul = innerht.children[0],lis = ul.children,arrow = $("corrow"); // 给每个li添加样式 addStyle(); // 大盒子的hover事件 innerht.onmouseover = function(){ animate(arrow,{"opacity":1}); }; innerht.onmouseout = function(){ animate(arrow,{"opacity":0}); }; // 右箭头点击事件 right.onclick = function(){ if( onOff ){ onOff = false; var atop = tempArr.shift(); tempArr.push( atop ); addStyle(); }; }; // 左箭头点击事件 left.onclick = function(){ if( onOff ){ onOff = false; var apop = tempArr.pop(); tempArr.unshift( apop ); addStyle(); }; }; function addStyle(){ for( i = 0 ; i < lis.length ; i++ ){ animate(lis[i],tempArr[i],function(){ onOff = true; console.log(onOff); }); }; }; // 设置animate函数 function animate(obj,json,fn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var flog = true ; for( k in json ){ if( k === "zIndex" ){ obj.style[k] = json[k]; }else if( k === "opacity" ){ var leader = getStyle(obj,k) * 100 ; var target = json[k] * 100 ; var step = ( target - leader ) / 10 ; step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ; // 浮点数判断相等时是不准确的 // 所以不能写leader = ( leader + step )/100; // 保持leader和target都是整数，便于下面判断相等 leader = leader + step ; obj.style[k] = leader / 100; }else{ var leader = parseInt( getStyle(obj,k) ) || 0 ; var target = json[k]; var step = ( target - leader ) / 10 ; step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ; leader = leader + step ; obj.style[k] = leader + "px"; }; if( leader !== target ){ flog = false ; }; }; console.log(flog); if( flog ){ clearInterval( obj.timer ); if( fn ){ fn(); }; }; }, 15); }; // 设置getStyle函数，获取计算后的样式 function getStyle(obj,attr){ if( window.getComputedStyle ){ return window.getComputedStyle(obj,null)[attr]; }else{ return obj.currentStyle[attr]; }; }; })(window) </script> </html>