輪播插件第二發附漸層功能設置-php手册-PHP中文網

首頁

php教程

php手册

輪播插件第二發附漸層功能設置

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2016 am 08:29 AM

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

修改選取框背景色圖：

（樣式都可以在css檔案裡進行修改的哈）