The second release of the carousel plug-in with gradient function settings
- WBOYOriginal
- 2016-09-08 08:29:171384browse
Upgraded version is available
js code/**Image Carousel*/<br>
/**Initial parameter settings*/<br>
_fun={<br>
Multid:'qi',//If multiple carousel plug-ins appear on a page, please copy the carousel code and set this parameter to a different value. This value is the id of ul<br>
Multcla:'nei_img',//If multiple carousel plug-ins appear on a page, please copy the carousel code and set this parameter to a different value. This value is the class that wraps ul<br>
sw:1,//Auto carousel switch 0 is on, 1 is off<br>
ti:2000,//Automatic rotation time<br>
sba:1,//Whether to display the selected label below<br>
ba:'#ACAAAA',//Background color setting of the selected background<br>
Ban:'#1D63AF',//Background color setting for unselected background<br>
bacla:'qink',//Set the class of the check box below<br>
jianb:1,//Whether to enable gradient<br>
jianban:30,//Every time the picture gradients, the s parameter setting for the picture gradient must be less than 3% of the automatic playback time interval (recommended value 30)<br>
}<br>
/**Initial parameter settings*/<br>
<br>
var qik=1;<br>
$(function(){//Carousel initialization <br>
var lio=$('#'+_fun.multid+' li');<br>
lio.mouseover(function(){//Mouse the mouse into the image to stop automatic playback<br>
qik=0;<br>
});<br>
lio.mouseout(function(){//Mouse the mouse out of the image to start automatic playback<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 the elements added after are in reverse order first at end></lio.length>
If(i==(lio.length-1)){<br>
obal.after('<span class="'+_fun.bacla+'" style="background:'+_fun.ba+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></span> ');<br>
}else{<br>
obal.after('<span class="'+_fun.bacla+'" style="background:'+_fun.ban+'" id="'+_fun.multid+(lio.length-i)+'" onmouseout="kai()" onclick="qin('+(lio.length-i)+')"></span> ');<br>
}<br>
}<br>
}<br>
})<br>
<br>
function kai(){//Enable automatic playback function<br>
qik=1;<br>
}<br>
function den(){//Turn off the autoplay function<br>
qik=0;<br>
}<br>
<br>
function qin(i){//Select function<br>
qik=0;//The automatic playback will stop after clicking the mouse<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);//Gradient display function<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);//Gradient display function<br>
}<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//Create the following selection tag<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){//Numerical growth function, used for picture gradient s parameter setting must be less than 10% of the automatic playback time interval<br>
If(i<k></k>
i++;<br>
$(ob).css('opacity','0.'+i+'9');<br>
}<br>
setTimeout(function(){//Must be written as an anonymous function so that it can accept parameters<br>
funqin(i,k,ob,s);<br>
},s);<br>
}<br>
<br>
<br>
function gee(){//Forward function-(regular time function, cannot be used as a forward button function)<br>
If(qik){//Because the time jump function calls the forward function, set the switch in this function<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);//Gradient display function<br>
}<br>
if(_fun.sba){<br> $('#'+_fun.multid+(kw+1)).css('background',_fun.ba);//Create the following selection tag<br>
}<br>
}else{<br>
if(_fun.sba){<br>
$('#'+_fun.multid+(kw+1)).css('background',_fun.ban);<br>
}<br>
}<br>
});<br>
}<br>
}<br>
<br>
/**Scheduled execution starts*/<br>
if(_fun.sw){<br>
setInterval (function(){//Anonymous function packaging so that it can accept parameters<br>
gee();<br>
}, _fun.ti);<br>
}<br>
/**Timing execution ends*/<br>
/**Image Carousel*/Open all renderings:
Close the check box effect picture below:
Modify the background color of the check box:
(Styles can be modified in the css file)
qin.zip
( 896.86 KB Download: 6 times )