本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)頁3D輪播圖封裝功能。分享給大家供大家參考，具體如下：

網(wǎng)頁偽3D輪播圖，其實(shí)就是輪播圖旋轉(zhuǎn)木馬效果。其實(shí)在jquery插件庫也有很多旋轉(zhuǎn)木馬的插件，但是博主封裝的這個新的插件比起以上的都適應(yīng)性更好。其適應(yīng)性好表現(xiàn)在：調(diào)用靈活性高用法更簡單，css樣式都封裝好了基本不用寫，在body里面寫ul>li>img標(biāo)簽即可，可設(shè)置參數(shù)多，甚至不同圖片的大小都可以自適應(yīng)輪播，各個瀏覽器兼容性好(包括IE，雖然我沒測過IE8以下瀏覽器，不過IE8以上都沒問題)，好了，以下看代碼和用法。

head引入兩個文件，第一個是jquery的插件(這是1.11.0版本，當(dāng)然其他版本也可以哦，不過低版本的相對IE兼容性更好)，第二個是我封裝好的javascript腳本

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script><script src="js/Figure_3D.js" type="text/javascript" charset="utf-8"></script>

body里面插入輪播圖，ul的id要為pic_play，當(dāng)然我這里是7張圖，你也可以增加減少圖片，但是這里有一個重要問題是，圖片數(shù)量要為單數(shù)，不能為偶數(shù)，否則會出問題，這是一個小小的bug。當(dāng)然你也可以在li里面寫<a><img src/></a>也是可以的。

<ul id="pic_play">  <li><img src="img/dc1.jpg"/></li>  <li><img src="img/dc2.jpg"/></li>  <li><img src="img/dc3.jpg"/></li>  <li><img src="img/dc4.jpg"/></li>  <li><img src="img/dc5.jpg"/></li>  <li><img src="img/dc6.jpg"/></li>  <li><img src="img/dc7.jpg"/></li></ul>

css基本不用寫，不過要習(xí)慣性給padding和margin歸0

*{  margin: 0;  padding: 0;  list-style: none;}

重要封裝腳本Figure_3D.js

//    ulwidth:父節(jié)點(diǎn)ul總寬度(number),//    height:ul和圖片的初始化最大高度(中間)(number),//    liwidth:圖片的初始化最大寬度(中間)(number),//    minopacity:圖片最小透明度(0~1),//    minscale:圖片最小縮放系數(shù)(0~1),//    direction:默認(rèn)輪播方向("left","right"),//    speed:動畫速度(number),//    delayed:每張圖片延時停留時間(number)(注:delayed>=speed),//    mousestop:鼠標(biāo)經(jīng)過是否停止(false,true),function init(ulwidth,height,liwidth,minopacity,minscale,direction,speed,delayed,mousestop){  $("#pic_play").css({"position":"relative","width":ulwidth,"height":height});  $("#pic_play>li").css({"position":"absolute","width":liwidth,"height":height});  if($("#pic_play>li>a").size()>0){    $("#pic_play>li>a").css("display","block");  }  if($("#pic_play>li>a>img").size()>0){    $("#pic_play>li>a>img").css({"display":"block","width":"100%","height":"100%"});  }else if($("#pic_play>li>img").size()>0){    $("#pic_play>li>img").css({"display":"block","width":"100%","height":"100%"});  }else return;  var len=$("#pic_play>li").size();  jsonstyle=[];  var display=-1;  var minopacity=minopacity;  var opacitystep=(1-minopacity)/(Math.floor(len/2)-1);  var minscale=minscale;  var scalestep=(1-minscale)/(Math.floor(len/2));  var Dvalue=Math.round((($("#pic_play").innerWidth()-$("#pic_play>li").eq(0).outerWidth())/2)/Math.floor(len/2));  $("#pic_play>li").each(function(i){    if(i<Math.floor(len/2)){      var realoff=i*Dvalue;      display++;      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());      var realtop=Math.round(($("#pic_play>li").eq(Math.floor(len/2)).outerHeight()-realheight)/2);      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":minopacity,"realWidth":realwidth,"realHeight":realheight,"realTop":realtop};      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":minopacity,"width":realwidth,"height":realheight,"top":realtop});      minopacity+=opacitystep;      if(minopacity>=1){        minopacity=1.0;      }      minscale+=scalestep;    }else if(i==Math.floor(len/2)){      display++      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());  var realoff=Math.round(($("#pic_play").innerWidth()-$("#pic_play>li").eq(i).outerWidth())/2);      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":1,"realWidth":realwidth,"realHeight":realheight,"realTop":0};      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":1,"width":realwidth,"height":realheight,"top":0});    }else{      display--;      minscale-=scalestep;      var realwidth=Math.round(minscale*$("#pic_play>li").eq(i).outerWidth());      var realheight=Math.round(minscale*$("#pic_play>li").eq(i).outerHeight());      var realoff=Math.round($("#pic_play").innerWidth()-(realwidth+(len-1-i)*Dvalue));      var realtop=Math.round(($("#pic_play>li").eq(Math.floor(len/2)).outerHeight()-realheight)/2);      jsonstyle[i]={"realOff":realoff,"realIndex":display,"realOpacity":minopacity,"realWidth":realwidth,"realHeight":realheight,"realTop":realtop};      $("#pic_play>li").eq(i).css({"left":realoff,"z-index":display,"opacity":minopacity,"width":realwidth,"height":realheight,"top":realtop});      minopacity-=opacitystep;    }  });  animationPlay(direction,speed,delayed);  if(mousestop==true){    animationStop(direction,speed,delayed);  }}//offset:左右按鈕分別距離ul左右邊距(number),//top:左右按鈕距離ul上邊距(number),//direction:默認(rèn)輪播方向("left","right"),一般和init里的一樣，如果你不想點(diǎn)擊后改變運(yùn)動方向,//speed:動畫速度(number),一般和init里的一樣，如果你不想點(diǎn)擊后改變動畫速度,//delayed:每張圖片延時停留時間(number)(注:delayed>=speed),一般和init里的一樣，如果你不想點(diǎn)擊后改變延時停留時間,function btn(offset,top,direction,speed,deleyed){  var leftbtn=$("<span></span>");  leftbtn.css({"width":32,"height":32,"display":"inline-block","position":"absolute","left":offset,"top":top,"background":"url(img/slider-arrow.png) no-repeat -100px 0","cursor":"pointer","z-index":100});  var rightbtn=$("<span></span>");  rightbtn.css({"width":32,"height":32,"display":"inline-block","position":"absolute","right":offset,"top":top,"background":"url(img/slider-arrow.png) no-repeat 0 0","cursor":"pointer","z-index":100});  $("#pic_play").append(leftbtn);  $("#pic_play").append(rightbtn);  leftbtn.hover(function(){    $(this).css("background-position","-160px 0");  },function(){    $(this).css("background-position","-100px 0");  });  rightbtn.hover(function(){    $(this).css("background-position","-60px 0");  },function(){    $(this).css("background-position","0 0");  });  leftbtn.click(function(){    clearInterval(timeplay);    $("#pic_play>li").stop(true);    var li=$("#pic_play>li").first();    $("#pic_play").append(li);    $("#pic_play>li").each(function(list){      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);    });    animationPlay(direction,speed,deleyed);  });  rightbtn.click(function(){    clearInterval(timeplay);    $("#pic_play>li").stop(true);    var li=$("#pic_play>li").last();    $("#pic_play").prepend(li);    $("#pic_play>li").each(function(list){      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);    });    animationPlay(direction,speed,deleyed);  });}//JSON動畫function animationPlay(direction,speed,deleyed){  timeplay=setInterval(function(){    if(direction.toLowerCase()=="left"){      var li=$("#pic_play>li").first();      $("#pic_play").append(li);    }else if(direction.toLowerCase()=="right"){      var li=$("#pic_play>li").last();      $("#pic_play").prepend(li);    }else return;    $("#pic_play>li").each(function(list){      $("#pic_play>li").eq(list).css("z-index",jsonstyle[list]["realIndex"]).animate({"left":jsonstyle[list]["realOff"],"opacity":jsonstyle[list]["realOpacity"],"width":jsonstyle[list]["realWidth"],"height":jsonstyle[list]["realHeight"],"top":jsonstyle[list]["realTop"]},speed);    });  },deleyed);}function animationStop(direction,speed,delayed){  $("#pic_play").mouseenter(function(){    clearInterval(timeplay);  });  $("#pic_play").mouseleave(function(){    animationPlay(direction,speed,delayed)  });}