Home  >  Article  >  Web Front-end  >  The jQuery plug-in displays the divs under this in turn_jquery

The jQuery plug-in displays the divs under this in turn_jquery

WBOY
WBOYOriginal
2016-05-16 18:54:261107browse

Copy code The code is as follows:

/*
Display the divs under this in turn
dname specifies the element that needs to perform this action. If dname is not specified, all sub-elements will be defaulted;
tname specifies the activation element corresponding to dname;
speed displays the switching speed;
effe displays the effect ;
*/
(function(){
.fn.w_picSwap=function(dname,tname,speed,effe){
speed=speed || 2000;
dname=dname | | "";
tname=tname || "";
effe=effe || 1;
return this.each(function(){
var myTime;
var obj=( this);
var objs=(this).find(dname);
var objnl=(this).find(tname).not(dname);
var len2=objnl.length;
var len=objs.length;
if(len<2){ return;}
var si=0;
var old=0;
objs.not(':first'). css('opacity',0);
function showImg(){
old=si;si=(si==(len-1))?0:si 1;
effect(objs.eq (old),objs.eq(si));
if(len2){
objnl.eq(old).removeClass("on");
objnl.eq(si).addClass(" on");
}
};
function effect(o,n){
switch(effe){
case 1:
o.stop().animate({ opacity:0});
n.stop().animate({opacity:1});
break;
case 2:
var toff=o.position();
n.stop().css("top",toff.top o.outerHeight()).animate({top:toff.top,opacity:1},200);
o.stop().animate( {top:toff.top-o.outerHeight(),opacity:0});
break;
}
}
function begin(){
myTime = setInterval(showImg,speed );
};
objnl.mouseover(function(){
si=objnl.index(this);
showImg();
});
//Slide in Stop the animation and slide out to start the animation.
obj.hover(function(){
if(myTime){clearInterval(myTime);}
},function(){
begin();
});
begin();
});
};
})(jQuery);
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn