轮播插件第二发带有渐变功能设置-php手册-PHP中文网

首页

php教程

php手册

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 08, 2016 am 08:29 AM

前面升级版可以
js代码/**图片轮播*/ /**初始参数设置*/ _fun={ multid:'qi',//如果一个页面中出现多个轮播插件，请将轮播代码复制并且将这个参数设置为不同的值，此值为ul的id multcla:'nei_img',//如果一个页面中出现多个轮播插件，请将轮播代码复制并且将这个参数设置为不同的值，此值为包裹ul的class sw:1,//自动轮播开关0为开1为关 ti:2000,//自动轮播时间 sba:1,//是否显示下面选中标签 ba:'#ACAAAA',//背景颜色设置选中的背景 ban:'#1D63AF',//背景颜色设置没选中的背景 bacla:'qink',//设置下面选中框的class jianb:1,//是否开启渐变 jianban:30,//图片渐变每次时间，用于图片渐变s参数设置必须小于自动播放时间间隔的3%(建议值30) } /**初始参数设置*/ var qik=1; $(function(){//轮播初始化 var lio=$('#'+_fun.multid+' li'); lio.mouseover(function(){//鼠标移入图停止自动播放 qik=0; }); lio.mouseout(function(){//鼠标移出图开启自动播放 qik=1; }); $.each(lio, function(k,v) { if(k==0){ $(v).addClass('img_lib'); }else{ $(v).addClass('img_lin'); } }); if(_fun.sba){ var obal=$('.'+_fun.multcla); for(i=0;i<lio.length></lio.length> if(i==(lio.length-1)){ obal.after(' '); }else{ obal.after(' '); } } } }) function kai(){//开启自动播放函数 qik=1; } function den(){//关闭自动播放函数 qik=0; } function qin(i){//选中函数 qik=0;//鼠标点击后就会停止自动播放 var liog_q=$('#'+_fun.multid+' li'); $.each(liog_q, function(kw,vw) { $('#'+_fun.multid+(kw+1)).css('background',_fun.ban); if(kw==(i-1)){ $(vw).removeClass('img_lin'); $(vw).addClass('img_lib'); if(_fun.jianb){ funqin(0,9,vw,_fun.jianban);//渐变显示函数 } }else{ $(vw).removeClass('img_lib'); $(vw).addClass('img_lin'); } }); $('#'+_fun.multid+i).css('background',_fun.ba); } function recoil(){//后退函数 var liog_r=$('#'+_fun.multid+' li'); var l_r=liog_r.length; var bl_r; $.each(liog_r, function(k,v) { if(v.className=='img_lib'){ if(k!=0){ bl_r=k; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); }else{ bl_r=l_r; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); } } }); $.each(liog_r, function(kw,vw) { if(kw==(bl_r-1)){ $(vw).removeClass('img_lin'); $(vw).addClass('img_lib'); if(_fun.jianb){ funqin(0,9,vw,_fun.jianban);//渐变显示函数 } if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//创建下面选择标签 } }else{ if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ban); } } }); } function geen(){//前进按钮函数 var liog=$('#'+_fun.multid+' li'); var l=liog.length; var bl; $.each(liog, function(k,v) { if(v.className=='img_lib'){ if(k!=(l-1)){ bl=k; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); }else{ bl=-1; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); } } }); $.each(liog, function(kw,vw) { if(kw==(bl+1)){ $(vw).removeClass('img_lin'); $(vw).addClass('img_lib'); if(_fun.jianb){ funqin(0,9,vw,_fun.jianban);//渐变显示函数 } if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//创建下面选择标签 } }else{ if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ban); } } }); } function funqin(i,k,ob,s){//数值增长函数，用于图片渐变s参数设置必须小于自动播放时间间隔的10% if(i<k></k> i++; $(ob).css('opacity','0.'+i+'9'); } setTimeout( function(){//必须写成匿名函数这样才能接受参数 funqin(i,k,ob,s); },s); } function gee(){//前进函数-(定期时间函数，不能用作前进按钮函数使用) if(qik){//因为时间跳转函数调用的是前进函数所以在这个函数中设置开关 var liog=$('#'+_fun.multid+' li'); var l=liog.length; var bl; $.each(liog, function(k,v) { if(v.className=='img_lib'){ if(k!=(l-1)){ bl=k; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); }else{ bl=-1; $(v).removeClass('img_lib'); $(v).addClass('img_lin'); } } }); $.each(liog, function(kw,vw) { if(kw==(bl+1)){ $(vw).removeClass('img_lin'); $(vw).addClass('img_lib'); if(_fun.jianb){ funqin(0,9,vw,_fun.jianban);//渐变显示函数 } if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//创建下面选择标签 } }else{ if(_fun.sba){ $('#'+_fun.multid+(kw+1)).css('background',_fun.ban); } } }); } } /**定时执行开始*/ if(_fun.sw){ setInterval ( function(){//匿名函数包装使其能接受参数 gee(); }, _fun.ti); } /**定时执行结束*/ /**图片轮播*/开启全部效果图：
轮播插件第二发带有渐变功能设置
关闭下面选中框效果图：

修改选中框背景色图：

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