jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能【附源碼下載】
更新時(shí)間：2019年02月15日 10:26:59 作者：測(cè)試貓
這篇文章主要介紹了jQuery實(shí)現(xiàn)經(jīng)典的網(wǎng)頁3D輪播圖封裝功能,結(jié)合實(shí)例形式詳細(xì)分析了基于jQuery插件Figure_3D.js實(shí)現(xiàn)3D輪播圖功能的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery實(shí)現(xiàn)的網(wǎng)頁3D輪播圖封裝功能。分享給大家供大家參考，具體如下：
網(wǎng)頁偽3D輪播圖，其實(shí)就是輪播圖旋轉(zhuǎn)木馬效果。其實(shí)在jquery插件庫也有很多旋轉(zhuǎn)木馬的插件，但是博主封裝的這個(gè)新的插件比起以上的都適應(yīng)性更好。其適應(yīng)性好表現(xiàn)在：調(diào)用靈活性高用法更簡(jiǎn)單，css樣式都封裝好了基本不用寫，在body里面寫ul>li>img標(biāo)簽即可，可設(shè)置參數(shù)多，甚至不同圖片的大小都可以自適應(yīng)輪播，各個(gè)瀏覽器兼容性好(包括IE，雖然我沒測(cè)過IE8以下瀏覽器，不過IE8以上都沒問題)，好了，以下看代碼和用法。
head引入兩個(gè)文件，第一個(gè)是jquery的插件(這是1.11.0版本，當(dāng)然其他版本也可以哦，不過低版本的相對(duì)IE兼容性更好)，第二個(gè)是我封裝好的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張圖，你也可以增加減少圖片，但是這里有一個(gè)重要問題是，圖片數(shù)量要為單數(shù)，不能為偶數(shù)，否則會(huì)出問題，這是一個(gè)小小的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:動(dòng)畫速度(number),
// delayed:每張圖片延時(shí)停留時(shí)間(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)動(dòng)方向,
//speed:動(dòng)畫速度(number),一般和init里的一樣，如果你不想點(diǎn)擊后改變動(dòng)畫速度,
//delayed:每張圖片延時(shí)停留時(shí)間(number)(注:delayed>=speed),一般和init里的一樣，如果你不想點(diǎn)擊后改變延時(shí)停留時(shí)間,
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動(dòng)畫
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)
});
}
腳本的調(diào)用方法，調(diào)用一個(gè)init函數(shù)初始化，定義的參數(shù)意義是：自定父節(jié)點(diǎn)ul總寬度(number)，自定ul和圖片的初始化最大高度(中間那圖)(number)，圖片的初始化最大寬度(中間那圖)(number)，圖片最小透明度(0~1)，圖片最小縮放系數(shù)(0~1)，默認(rèn)輪播方向("left","right")，動(dòng)畫速度ms(number)，輪播圖片延時(shí)停留時(shí)間ms(number)(注:這個(gè)參數(shù)必須大于動(dòng)畫速度)，鼠標(biāo)經(jīng)過是否停止(false,true)。
$(function(){
init(1300,600,600,0.7,0.5,"right",500,3000,false);
});
為了運(yùn)行效果更為顯眼，給ul加個(gè)邊框居中吧。
#pic_play{
position: relative;
border: 1px solid black;
margin: 30px auto;
}
看以下運(yùn)行效果：這里其實(shí)每張圖的大小都不一樣啊，都可以自適應(yīng)輪播了
大家會(huì)發(fā)現(xiàn)沒有左右切換的按鈕？沒關(guān)系，我們可以調(diào)用btn()函數(shù)。btn里面的參數(shù)意義分別是：左右按鈕分別距離ul左右邊距(number)，左右按鈕距離ul上邊距(number)，默認(rèn)輪播方向("left","right")一般和init里的一樣如果你不想點(diǎn)擊后改變運(yùn)動(dòng)方向，動(dòng)畫速度ms(number)一般和init里的一樣如果你不想點(diǎn)擊后改變動(dòng)畫速度，每張圖片延時(shí)停留時(shí)間ms(number)(注:這個(gè)參數(shù)必須大于動(dòng)畫速度)一般和init里的一樣如果你不想點(diǎn)擊后改輪播停留時(shí)間。
$(function(){
init(1000,460,460,0.7,0.5,"right",500,3000,false);
btn(40,230,"right",500,3000);
});
下面來看效果：
如果想用自己的按鈕款式，可以直接在我的btn封裝函數(shù)里面換啊。
附：這里給出了一個(gè)完整測(cè)試實(shí)例（圖片替換成了養(yǎng)眼的美女圖片），可點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery圖片操作技巧大全》、《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結(jié)》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
您可能感興趣的文章:
相關(guān)文章
jquery $.ajax()取xml數(shù)據(jù)的小問題解決方法
今天想做一個(gè)用$.ajax()從xml中讀取數(shù)據(jù)的這么一個(gè)異步交互過程2010-11-11
Jquery Easyui選項(xiàng)卡組件Tab使用詳解（10）
這篇文章主要為大家詳細(xì)介紹了Jquery Easyui菜單組件Menu的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了JQuery包裹DOM節(jié)點(diǎn)的方法,實(shí)例分析了wrap與wrapAll方法實(shí)現(xiàn)包裹DOM節(jié)點(diǎn)的技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-06-06
這篇文章主要介紹了Jquery樹插件zTree用法入門教程,實(shí)例分析了zTree插件的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-02-02
基于jquery實(shí)現(xiàn)的文字淡入淡出效果
這篇文章介紹了jquery實(shí)現(xiàn)的文字淡入淡出效果實(shí)例，有需要的朋友可以參考一下2013-11-11
Hallo.js基于jQuery UI所見即所得的Web編輯器
Hallo.js是一個(gè)簡(jiǎn)單的富文本編輯器，基于jQuery UI的部件，利用HTML5的contentEditable功能實(shí)現(xiàn)了即時(shí)編輯功能，其主要目的是為了提供良好的書寫體驗(yàn)，對(duì)Hallo.js感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了省市二級(jí)聯(lián)動(dòng)小案例講解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
jquery實(shí)現(xiàn)表格無縫滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)表格無縫滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
本節(jié)主要介紹了jquery使用text()方法取標(biāo)簽中的文本的具體實(shí)現(xiàn),需要的朋友可以參考下2014-07-07
jquery進(jìn)行數(shù)組遍歷如何跳出當(dāng)前的each循環(huán)
通過 jquery 的循環(huán)方法進(jìn)行數(shù)組遍歷，但是當(dāng)不符合條件時(shí)，怎么跳出當(dāng)前循環(huán)，解決方法如下,需要的朋友可以參考下2014-06-06