勾配関数設定を備えたカルーセル プラグインの第 2 リリース
- WBOYオリジナル
- 2016-09-08 08:29:171403ブラウズ
アップグレード版が利用可能です
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 回 )