当前位置: 编程技术>jquery
jquery图片淡入淡出与图片切换效果的例子
来源: 互联网 发布时间：2014-10-09
本文导语: 例子，jquery制作图片淡入淡出图片切换效果。 jquery相册插件制作图片淡入淡出效果，图片自动轮播淡进淡出效果，可用于jquery图片相册特效。 代码： 代码示例: //图片切换调用语句 imgtransition({speed: 3000, animate: 1000}); $.f...
例子，jquery制作图片淡入淡出图片切换效果。
jquery相册插件制作图片淡入淡出效果，图片自动轮播淡进淡出效果，可用于jquery图片相册特效。
代码：
代码示例:
//图片切换调用语句 imgtransition({speed: 3000, animate: 1000});
$.fn.imgtransition = function(o){
var defaults = {
speed : 5000,
animate : 1000
};
o = $.extend(defaults, o);
return this.each(function(){
var arr_e = $("li", this);
arr_e.css({position: "absolute"});
arr_e.parent().css({margin: "0", padding: "0", "list-style": "none", overflow: "hidden"});
function shownext(){
var active = arr_e.filter(".active").length ? arr_e.filter(".active") : arr_e.first();
var next = active.next().length ? active.next() : arr_e.first();
active.css({"z-index": 9});
next.css({opacity: 0.0, "z-index": 10}).addclass('active').animate({opacity: 1.0}, o.animate, function(){
active.removeclass('active').css({"z-index": 8});
});
}
arr_e.first().css({"z-index": 9});
setinterval(function(){
shownext();
},o.speed);
});
};
您可能感兴趣的文章:
本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术，将尽最大努力为读者提供更好的信息聚合和浏览方式。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。
本站(WWW.)站内文章除注明原创外，均为转载、整理或搜集自网络。欢迎任何形式的转载，转载请注明出处。