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

原创: 2016-09-08 08:29:17 1011浏览

前面升级版可以
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);

}

/**定时执行结束*/

/**图片轮播*/