Die zweite Version des Karussell-Plug-Ins mit Verlaufsfunktionseinstellungen
- WBOYOriginal
- 2016-09-08 08:29:171401Durchsuche
Eine aktualisierte Version ist verfügbar
js-Code/**Bilderkarussell*/<br>
/**Anfängliche Parametereinstellungen*/<br>
_fun={<br>
Multid:'qi',//Wenn mehrere Karussell-Plug-Ins auf einer Seite erscheinen, kopieren Sie bitte den Karussell-Code und setzen Sie diesen Parameter auf einen anderen Wert. Dieser Wert ist die ID von ul<br>
Multcla:'nei_img',//Wenn mehrere Karussell-Plug-Ins auf einer Seite erscheinen, kopieren Sie bitte den Karussell-Code und setzen Sie diesen Parameter auf einen anderen Wert. Dieser Wert ist die Klasse<br>, die ul umschließt
sw:1,//Automatischer Karussellschalter 0 ist eingeschaltet, 1 ist ausgeschaltet<br>
ti:2000,//Automatische Rotationszeit<br>
sba:1,//Ob das ausgewählte Tag unten angezeigt werden soll<br>
ba:'#ACAAAA',//Hintergrundfarbeinstellung des ausgewählten Hintergrunds<br>
Ban:'#1D63AF',//Hintergrundfarbeneinstellung ist nicht ausgewählt<br>
bacla:'qink',//Legen Sie die Klasse des Kontrollkästchens unten fest<br>
jianb:1,//Ob der Farbverlauf aktiviert werden soll<br>
jianban:30, // Bei jedem Bildverlauf muss die s-Parametereinstellung für den Bildverlauf weniger als 3 % des automatischen Wiedergabezeitintervalls betragen (empfohlener Wert 30) <br>
}<br>
/**Anfängliche Parametereinstellungen*/<br>
<br>
var qik=1;<br>
$(function(){//Karussellinitialisierung <br>
var lio=$('#' _fun.multid ' li');<br>
lio.mouseover(function(){//Führen Sie die Maus in das Bild, um die automatische Wiedergabe zu stoppen<br>
qik=0;<br>
});<br>
lio.mouseout(function(){//Bewegen Sie die Maus aus dem Bild, um die automatische Wiedergabe zu starten<br>
qik=1;<br>
});<br>
$.each(lio, function(k,v) {<br>
If(k==0){<br>
$(v).addClass('img_lib');<br>
}sonst{<br>
$(v).addClass('img_lin');<br>
}<br>
}); <br>
If(_fun.sba){<br>
var obal=$('.' _fun.multcla);<br>
for(i=0;i<lio.length die nachher hinzugef elemente in umgekehrter reihenfolge sind befinden sich zuerst am ende></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>
}else{<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>
Funktion kai(){//Automatische Wiedergabefunktion aktivieren<br>
qik=1;<br>
}<br>
function den(){//Deaktivieren Sie die Autoplay-Funktion<br>
qik=0;<br>
}<br>
<br>
Funktion qin(i){//Ausgewählte Funktion<br>
qik=0;//Die automatische Wiedergabe stoppt, wenn mit der Maus geklickt wird<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);//Verlaufsanzeigefunktion<br>
}<br>
}sonst{<br> $(vw).removeClass('img_lib');<br>
$(vw).addClass('img_lin');<br>
}<br>
});<br>
$('#' _fun.multid i).css('background',_fun.ba);<br>
}<br>
<br>
Funktion 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>
}else{<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>
}else{<br>
if(_fun.sba){<br>
$('#' _fun.multid (kw 1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
Funktion 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>
}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);//Verlaufsanzeigefunktion<br>
}<br>
if(_fun.sba){<br>
$('#' _fun.multid (kw 1)).css('background',_fun.ba);//Erstellen Sie das folgende Auswahl-Tag <br>
}<br>
}sonst{<br>
if(_fun.sba){<br>
$('#' _fun.multid (kw 1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
<br>
}<br>
<br>
Funktion funqin(i,k,ob,s){//Numerische Wachstumsfunktion, die für die Parametereinstellung des Bildgradienten verwendet wird, muss weniger als 10 % des automatischen Wiedergabezeitintervalls betragen<br>
If(i<k></k>
ich ;<br>
$(ob).css('opacity','0.' i '9');<br>
}<br>
setTimeout(function(){//Muss als anonyme Funktion geschrieben werden, damit sie Parameter akzeptieren kann<br>
funqin(i,k,ob,s);<br>
},s);<br>
}<br>
<br>
<br>
Funktion gee(){//Weiterleitungsfunktion-(reguläre Zeitfunktion, kann nicht als Vorwärtsschaltflächenfunktion verwendet werden)<br>
If(qik){//Da die Zeitsprungfunktion die Vorwärtsfunktion aufruft, setzen Sie den Schalter in dieser Funktion <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)){
bl=k;<br>
$(v).removeClass('img_lib');<br>
$(v).addClass('img_lin');<br>
}sonst{<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);//Verlaufsanzeigefunktion<br>
}<br>
if(_fun.sba){<br> $('#' _fun.multid (kw 1)).css('background',_fun.ba);//Erstellen Sie das folgende Auswahl-Tag <br>
}<br>
}sonst{<br>
if(_fun.sba){<br>
$('#' _fun.multid (kw 1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
}<br>
}<br>
<br>
/**Die geplante Ausführung beginnt*/<br>
if(_fun.sw){<br>
setInterval (function(){//Anonyme Funktionsverpackung, damit sie Parameter akzeptieren kann<br>
gee();<br>
}, _fun.ti);<br>
}<br>
/**Die Timing-Ausführung endet*/<br>
/**Bilderkarussell*/Alle Renderings öffnen:
Schließen Sie das Kontrollkästchen-Effektbild unten:
Ändern Sie die Hintergrundfarbe des Kontrollkästchens:
(Stile können in der CSS-Datei geändert werden)
qin.zip
(896,86 KB Download: 6 Mal)