jQuery 插件 将this下的div轮番显示_Javascript教程-查字典教程网
jQuery 插件 将this下的div轮番显示
jQuery 插件 将this下的div轮番显示
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:/*将this下的div轮番显示dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素;tname指...

复制代码 代码如下:

/*

将this下的div轮番显示

dname指定需要执行此动作的元素,如果没有指定dname,将默认全部子元素;

tname指定与dname对应的激活元素;

speed显示切换速度;

effe显示的效果;

*/

(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();

});

//滑入 停止动画,滑出开始动画.

obj.hover(function(){

if(myTime){clearInterval(myTime);}

},function(){

begin();

});

begin();

});

};

})(jQuery);

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类