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

前面升级版可以
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 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 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文件里进行修改的哈）

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