勾配関数設定を備えたカルーセル プラグインの第 2 リリース

アップグレード版が利用可能です
jsコード/**画像カルーセル*/<br> /**パラメータの初期設定*/<br> _楽しい={<br> Multid:'qi',//ページに複数のカルーセル プラグインが表示される場合は、カルーセル コードをコピーして、このパラメーターを別の値に設定してください。この値は ul<br> の ID です。 Multcla:'nei_img',//ページに複数のカルーセル プラグインが表示される場合は、カルーセル コードをコピーして、このパラメーターを別の値に設定してください。この値は ul<br> をラップするクラスです。 sw:1,//自動カルーセル スイッチ 0 がオン、1 がオフです<br> ti:2000,//自動回転時間<br> sba:1,//選択されたラベルを下に表示するかどうか<br> ba:'#ACAAAA',//選択した背景の背景色設定<br> Ban:'#1D63AF',//選択されていない背景の背景色設定<br> bacla:'qink',//以下のチェックボックスのクラスを設定します<br> jianb:1,//グラデーションを有効にするかどうか<br> jianban:30, // 画像のグラデーションごとに、画像のグラデーションの s パラメータ設定は自動再生時間間隔 (推奨値 30) の 3% 未満である必要があります<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> }その他{<br> $(v).addClass('img_lin');<br> }<br> }); もし(_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 class="'+_fun.bacla+'" style="background:'+_fun.ba+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></span><br> }その他{<br> obal.after('<span class="'+_fun.bacla+'" style="background:'+_fun.ban+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></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>            $(vw).removeClass('img_lib');<br>             $(vw).addClass('img_lin');<br>         }<br>     });<br>     $('#'+_fun.multid+i).css('background',_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, function(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, function(kw,vw) {<br>         if(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>             if(_fun.sba){<br>             $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//创建下面选择标签<br>             }<br>         }その他{<br>             if(_fun.sba){<br>             $('#'+_fun.multid+(kw+1)).css('background',_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, 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>             }その他{<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> もし(_fun.sba){<br> $（ '＃'+_ fun.multid+（kw+1））。css（ 'background'、_ fun.ba）; //次の選択タグを作成 }<br> }その他{<br> もし(_fun.sba){<br> $('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br> }<br> }<br> });<br> <br> }<br> <br> function funqin(i,k,ob,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(){//Forward function-(通常時関数、進むボタン関数としては使用できません)<br> If(qik){//タイムジャンプ関数はforward関数を呼び出すため、この関数内でスイッチを設定します<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> }その他{<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> もし(_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> げー();<br> }, _fun.ti);<br> }<br> /**タイミング実行終了*/<br> /**画像カルーセル*/<br>すべてのレンダリングを開く:
チェックボックスを閉じると、以下の効果画像が表示されます:

チェックボックスの背景色を変更します:


(スタイルはCSSファイルで変更できます)

秦.zip ( 896.86 KB ダウンロード: 6 回 )