Die zweite Version des Karussell-Plug-Ins mit Verlaufsfunktionseinstellungen

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)