轮播插件第二发 带有渐变功能设置
- WBOY原创
- 2016-09-08 08:29:171384浏览
前面升级版可以
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 次 )