The second release of the carousel plug-in with gradient function settings

Upgraded version is available
js code/**Image Carousel*/<br> /**Initial parameter settings*/<br> _fun={<br> Multid:'qi',//If multiple carousel plug-ins appear on a page, please copy the carousel code and set this parameter to a different value. This value is the id of ul<br> Multcla:'nei_img',//If multiple carousel plug-ins appear on a page, please copy the carousel code and set this parameter to a different value. This value is the class that wraps ul<br> sw:1,//Auto carousel switch 0 is on, 1 is off<br> ti:2000,//Automatic rotation time<br> sba:1,//Whether to display the selected label below<br> ba:'#ACAAAA',//Background color setting of the selected background<br> Ban:'#1D63AF',//Background color setting for unselected background<br> bacla:'qink',//Set the class of the check box below<br> jianb:1,//Whether to enable gradient<br> jianban:30,//Every time the picture gradients, the s parameter setting for the picture gradient must be less than 3% of the automatic playback time interval (recommended value 30)<br> }<br> /**Initial parameter settings*/<br> <br> var qik=1;<br> $(function(){//Carousel initialization <br> var lio=$('#'+_fun.multid+' li');<br> ​ lio.mouseover(function(){//Mouse the mouse into the image to stop automatic playback<br>         qik=0;<br> });<br> ​ lio.mouseout(function(){//Mouse the mouse out of the image to start automatic playback<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 the elements added after are in reverse order first at end></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> function kai(){//Enable automatic playback function<br> ​ qik=1;<br> }<br> function den(){//Turn off the autoplay function<br> ​ qik=0;<br> }<br> <br> function qin(i){//Select function<br> ​ qik=0;//The automatic playback will stop after clicking the mouse<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);//Gradient display function<br>             }<br>                                                    }else{<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>             }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> 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>             }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);//Gradient display function<br>             }<br>                   if(_fun.sba){<br>                     $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//Create the following selection tag<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){//Numerical growth function, used for picture gradient s parameter setting must be less than 10% of the automatic playback time interval<br> If(i<k></k>           i++;<br>          $(ob).css('opacity','0.'+i+'9');<br> }<br> setTimeout(function(){//Must be written as an anonymous function so that it can accept parameters<br>          funqin(i,k,ob,s);<br> },s);<br> }<br> <br> <br> function gee(){//Forward function-(regular time function, cannot be used as a forward button function)<br> If(qik){//Because the time jump function calls the forward function, set the switch in this function<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);//Gradient display function<br>             }<br>                   if(_fun.sba){<br>                                                                                                                                                                                                      $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//Create the following selection tag<br>              }<br>           }else{<br>                   if(_fun.sba){<br>                  $('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br>              }<br>         }<br> });<br> }<br> }<br> <br> /**Scheduled execution starts*/<br> if(_fun.sw){<br> setInterval (function(){//Anonymous function packaging so that it can accept parameters<br>         gee();<br> }, _fun.ti);<br> }<br> /**Timing execution ends*/<br> /**Image Carousel*/Open all renderings:

Close the check box effect picture below:

Modify the background color of the check box:


(Styles can be modified in the css file)

qin.zip ( 896.86 KB Download: 6 times )