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

前面升級版可以
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 次 )