/******************************************************************************************************** * D-ImageChange *---------------------------------------------------------------------------------------------------- * @Desc 图片轮换插件 *---------------------------------------------------------------------------------------------------- * @Author D.夏亦知非 * @Email DeclanZhang@gmail.com * @QQ 29540200 * @Blog http://onblur.javaeye.com * @Date 2009-10-19 * @Version 1.1 * @JQueryVersion 1.3.2 * * @update v1.1 å¢žåŠ æ¸…ç©ºåŽŸå§‹å†…å®¹åŠŸèƒ½,ä»¥å…é¡µé¢åŠ è½½å®Œæˆä¹‹å‰æ˜¾ç¤ºå¤§ç‰‡ç©ºç™½ * v1.2 修正IE6每次从服务器读取背景图片的BUG **/ // 修正IE6每次从服务器读取背景图片的BUG (function($){ jQuery.fn.extend({ d_imagechange:function(setting){ var config = $.extend({ bg:true, // 是否背景色 title:true, // æ˜¯å¦æœ‰æ ‡é¢˜ desc:true, // 是否有描述 btn:true, // 是否显示按钮 repeat:'no-repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat' bgColor:'#000', // 背景色 bgOpacity:0.5, // 背景透明度 bgHeight:29, // 背景高 titleSize:14, // æ ‡é¢˜æ–‡å­—å¤§å° titleFont:'Verdana,宋体', // æ ‡é¢˜æ–‡æœ¬å­—ä½“ titleColor:'#FFF', // æ ‡é¢˜æ–‡æœ¬é¢œè‰² titleTop:4, // æ ‡é¢˜ä¸Šè¾¹è· titleLeft:4, // æ ‡é¢˜å·¦è¾¹è· descSize:12, // 描述文字大小 descFont:'Verdana,宋体', // 描述文本字体 descColor:'#FFF', // 描述文本颜色 descTop:2, // 描述上边距 descLeft:4, // 描述左边距 btnColor:'#FFF', // 按钮颜色1 btnOpacity:1, // 未选中按钮透明度 btnFont:'Verdana', // 按钮文本字体 btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制) btnFontColor:'#000', // 按钮文本颜色 btnText:true, // 是否显示文本 btnWidth:18, // 按钮宽 btnHeight:18, // 按钮高 btnMargin:4, // 按钮间距 btnTop:4, // 按钮上边距 playTime:3000, // 轮换间隔时间,单位(毫秒) animateTime:1000, // 动画执行时间,单位(毫秒) animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':æ— åŠ¨ç”» width:747, // 宽, 不设定则从DOM读取 height:337 // 高, 不设定则从DOM读取 },setting); return $(this).each(function(){ var _this = $(this); var _w = config.width || _this.width(); // 宽 var _h = config.height || _this.height(); // 高 var _n = config.data.length; // æ•°ç›® var _i = 0; // 当前显示的item序号 _this.empty() .css('overflow','hidden') .width(_w) .height(_h); // 半透明背景 if(config.bg){ $('
').appendTo(_this) .width(_w) .height(config.bgHeight) .css('background-color',config.bgColor) .css('opacity',config.bgOpacity) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('zIndex',3333); } // 文字区 var _textArea = $('
').appendTo(_this) .width(_w) .height(config.bgHeight) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('zIndex',6666); // 按钮区 var _btnArea = $('
').appendTo(_this) .width(_w) .height(config.bgHeight) .css('position','absolute') .css('marginTop',_h-config.bgHeight) .css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n) .css('zIndex',9999) .css('display',config.btn?'block':'none'); // 插入空div修正IE的绝对定位BUG $('
').appendTo(_this); // 图片区 var _imgArea = $('
').appendTo(_this) .width('x,show-x'.indexOf(config.animateStyle)!=-1?_w*_n:_w) .height('y,show-y'.indexOf(config.animateStyle)!=-1?_h*_n:_h); // 初始化图片 文字 按钮 $.each(config.data,function(i,n){ $('').appendTo(_imgArea) .width(_w) .height(_h) .attr('href',n.href?n.href:'') .attr('target',n.target?n.target:'') .css('display','block') .css('background-image','url('+n.src+')') .css('background-repeat',config.repeat) .css('display','block') .css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':''); if(config.title){ $('').appendTo(_textArea) .html(n.title?n.title:'') .css('display',i==0?'block':'none') .css('fontSize',config.titleSize) .css('fontFamily',config.titleFont) .css('color',config.titleColor) .css('marginTop',config.titleTop) .css('marginLeft',config.titleLeft); } if(config.desc){ $('

').appendTo(_textArea) .html(n.desc?n.desc:'') .css('display',i==0?'block':'none') .css('fontSize',config.descSize) .css('fontFamily',config.descFont) .css('color',config.descColor) .css('marginTop',config.descTop) .css('marginLeft',config.descLeft); } $('').appendTo(_btnArea) .width(config.btnWidth) .height(config.btnHeight) .html(config.btnText?i+1:'') .css('fontSize',config.btnFontSize) .css('fontFamily',config.btnFont) .css('textAlign','center') .css('display','block') .css('float','left') .css('overflow','hidden') .css('marginTop',config.btnTop) .css('marginRight',config.btnMargin) .css('background-color',config.btnColor) .css('opacity',i==0?1:config.btnOpacity) .css('color',config.btnFontColor) .css('cursor','pointer').addClass("numa") }); // ä¿å­˜æ‰€æœ‰å…ƒç´ é›†åˆçš„å¼•ç”¨,方便在事件中使用 var _bs = _btnArea.children('a'); var _ts = _textArea.children('b'); var _ds = _textArea.children('p'); var _is = _imgArea.children('a'); // é’ˆå¯¹ä¸åŒçš„åŠ¨ç”»æ•ˆæžœçš„é™„åŠ è®¾ç½®, 主要是block的问题, 若在初始化时设置block:noneä¼šé€ æˆä¹‹åŽæ— block效果 if('o,show,none'.indexOf(config.animateStyle)!=-1){ _is.not(':first').hide(); _is.css('position','absolute'); } // æ·»åŠ æŒ‰é’®äº‹ä»¶ _bs.click(function(){ var ii = _bs.index(this); if(ii==_i){return;} _this.find(".ona").removeClass("ona") $(this).addClass("ona"); _ts.eq(_i).css('display','none'); _ts.eq(ii).css('display','block'); _ds.eq(_i).css('display','none'); _ds.eq(ii).css('display','block'); _bs.eq(_i).css('opacity',config.bgOpacity); _bs.eq(ii).css('opacity',1) switch(config.animateStyle){ case 'o' : _is.eq(_i).fadeOut(config.animateTime); _is.eq(ii).fadeIn(config.animateTime); break; case 'x' : _imgArea.animate({marginLeft:-ii*_w},config.animateTime); break; case 'y' : _imgArea.animate({marginTop:-ii*_h},config.animateTime); break; case 'show' : case 'show-x' : case 'show-y' : _is.eq(_i).hide(config.animateTime); _is.eq(ii).show(config.animateTime); break; case 'none' : _is.eq(_i).hide(); _is.eq(ii).show(); break; } _i = ii; }); // æ·»åŠ è½®æ¢ä»»åŠ¡ var _play = setInterval(play,config.playTime); function play(){ _bs.eq((_i+1)%_n).click() } // é¼ æ ‡è¿›å…¥äº‹ä»¶ _this.mouseover(function(){ clearInterval(_play); }); // é¼ æ ‡ç¦»å¼€äº‹ä»¶ _this.mouseout(function(){ _play = setInterval(play,config.playTime); }); }); } }); })(jQuery);