轮播插件第二发 带有渐变功能设置

前面升级版可以
js代码/**图片轮播*/<br> /**初始参数设置*/<br>     _fun={<br>    multid:'qi',//如果一个页面中出现多个轮播插件，请将轮播代码复制 并且将这个参数设置为不同的值，此值为ul的id<br>    multcla:'nei_img',//如果一个页面中出现多个轮播插件，请将轮播代码复制 并且将这个参数设置为不同的值，此值为包裹ul的class<br>    sw:1,//自动轮播开关0为开1为关<br>    ti:2000,//自动轮播时间<br>    sba:1,//是否显示下面选中标签<br>    ba:'#ACAAAA',//背景颜色设置选中的背景<br>    ban:'#1D63AF',//背景颜色设置没选中的背景<br>    bacla:'qink',//设置下面选中框的class<br>    jianb:1,//是否开启渐变<br>    jianban:30,//图片渐变每次时间，用于图片渐变s参数设置必须小于自动播放时间间隔的3%(建议值30)<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>         }else{<br>             $(v).addClass('img_lin');<br>         }<br>     }); <br>     if(_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></span> ');<br>     }else{<br>         obal.after('<span></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>         }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);//渐变显示函数<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 funqin(i,k,ob,s){//数值增长函数，用于图片渐变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(){//前进函数-(定期时间函数，不能用作前进按钮函数使用)<br>     if(qik){//因为时间跳转函数调用的是前进函数所以在这个函数中设置开关<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);//渐变显示函数<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> /**定时执行开始*/<br> if(_fun.sw){<br>    setInterval ( function(){//匿名函数包装使其能接受参数<br>        gee();<br>    }, _fun.ti);<br> }<br> /**定时执行结束*/<br> /**图片轮播*/开启全部效果图：

关闭下面选中框效果图：

修改选中框背景色图：


（样式都可以在css文件里进行修改的哈）

qin.zip ( 896.86 KB 下载：6 次 )