輪播插件第二發 附漸層功能設置
- WBOY原創
- 2016-09-08 08:29:171340瀏覽
前面升級版可以
js程式碼/**圖片輪播*/<br>
/**初始參數設定*/<br>
_fun={<br>
multid:'qi',//如果一個頁面中出現多個輪播插件，請將輪播程式碼複製 並且將此參數設為不同的值，此值為ul的id<br>
multcla:'nei_img',//如果一個頁面中出現多個輪播插件，請將輪播程式碼複製 並且將此參數設為不同的值，此值為包裹ul的class<br>
sw:1,//自動輪播開關0為開1為關<br>
ti:2000,//自動輪播時間<br>
sba:1,//是否顯示下方選取標籤<br>
ba:'#ACAAAA',//背景顏色設定選取的背景<br>
ban:'#1D63AF',//背景顏色設定沒選取的背景<br>
bacla:'qink',//設定下面選取框的class<br>
jianb:1,//是否開啟漸層<br>
jianban:30,//圖片漸變每次時間，用於圖片漸變s參數設定必須小於自動播放時間間隔的3%(建議值30)<br>
}<br>
/**初始參數設定*/<br>
<br>
var qik=1;<br>
$(function(){//輪播初始化 <br>
var lio=$('#'+_fun.multid+' li');<br>
lio.mouseover(function(){//滑鼠移入圖停止自動播放<br>
qik=0;<br>
});<br>
lio.mouseout(function(){//滑鼠移出圖開啟自動播放<br>
qik=1;<br>
});<br>
$.each(lio, function(k,v) {<br>
if(k==0){<br>
$(v).addClass('img_lib');<br>
}else{<br>
$(v).addClass('img_lin');<br>
}<br>
}); <br>
if(_fun.sba){<br>
var obal=$('.'+_fun.multcla);<br>
for(i=0;i<lio.length></lio.length>
if(i==(lio.length-1)){<br>
obal.after('<span kai></span> ');<br>
}else{<br>
obal.after('<span kai></span> ');<br>
}<br>
}<br>
}<br>
})<br>
<br>
function kai(){//開啟自動播放函數<br>
qik=1;<br>
}<br>
function den(){//關閉自動播放函數<br>
qik=0;<br>
}<br>
<br>
function qin(i){//選取函數<br>
qik=0;//滑鼠點擊後就會停止自動播放<br>
var liog_q=$('#'+_fun.multid+' li');<br>
$.each(liog_q, function(kw,vw) {<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br>
if(kw==(i-1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
if(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//漸進顯示函數<br>
}<br>
<br>
}else{<br> $(vw).removeClass('img_lib');<br>
$(vw).addClass('img_lin');<br>
}<br>
});<br>
$('#'+_fun.multid+i).css('背景',_fun.ba);<br>
}<br>
<br>
function recoil(){//後退函數<br>
<br>
var liog_r=$('#'+_fun.multid+' li');<br>
var l_r=liog_r.length;<br>
var bl_r;<br>
$.each(liog_r, 函數(k,v) {<br>
if(v.className=='img_lib'){<br>
if(k!=0){ <br>
bl_r=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}其他{<br>
bl_r=l_r;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}<br>
}<br>
});<br>
$.each(liog_r, 函數(kw,vw) {<br>
如果（kw==（bl_r-1））{<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
if(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//切換顯示函數<br>
}<br>
如果（_fun.sba）{<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//建立下列選擇標籤<br>
}<br>
}其他{<br>
如果（_fun.sba）{<br>
$('#'+_fun.multid+(kw+1)).css('背景',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
function geen(){//前進按鈕函數<br>
<br>
var liog=$('#'+_fun.multid+' li');<br>
var l=liog.length;<br>
var bl;<br>
$.each(liog, 函數(k,v) {<br>
if(v.className=='img_lib'){<br>
if(k!=(l-1)){ <br>
bl=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}其他{<br>
bl=-1; <br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br> }<br>
}<br>
});<br>
$.each(liog, function(kw,vw) {<br>
if(kw==(bl+1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
if(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//漸進顯示函數<br>
}<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//建立下列選擇標籤<br>
}<br>
}else{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
function funqin(i,k,ob,s){//數值成長函數，用於圖片漸變s參數設定必須小於自動播放時間間隔的10%<br>
if(i<k></k>
i++;<br>
$(ob).css('opacity','0.'+i+'9');<br>
}<br>
setTimeout( function(){//必須寫成匿名函數才能接受參數<br>
funqin(i,k,ob,s);<br>
},s);<br>
}<br>
<br>
<br>
function gee(){//前進函數-(定期時間函數，不能用作前進按鈕函數使用)<br>
if(qik){//因為時間跳躍函數呼叫的是前進函數所以在這個函數中設定開關<br>
var liog=$('#'+_fun.multid+' li');<br>
var l=liog.length;<br>
var bl;<br>
$.each(liog, function(k,v) {<br>
if(v.className=='img_lib'){<br>
if(k!=(l-1)){ <br>
bl=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}else{<br>
bl=-1;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}<br>
}<br>
});<br>
$.each(liog, function(kw,vw) {<br>
if(kw==(bl+1)){<br>
$(vw).removeClass('img_lin');<br>
$(vw).addClass('img_lib');<br>
if(_fun.jianb){<br>
funqin(0,9,vw,_fun.jianban);//漸進顯示函數<br>
}<br>
if(_fun.sba){<br> $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//建立下列選擇標籤<br>
}<br>
}else{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
}<br>
}<br>
<br>
/**定時執行開始*/<br>
if(_fun.sw){<br>
setInterval ( function(){//匿名函數包裝使其接受參數<br>
gee();<br>
}, _fun.ti);<br>
}<br>
/**定時執行結束*/<br>
/**圖片輪播*/開啟全部效果圖：
關閉下面選取框效果圖：
修改選取框背景色圖：
（樣式都可以在css檔案裡進行修改的哈）
qin.zip
( 896.86 KB 下載：6 次 )