/********************************************************************************************************
* 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
**/
(function($){
jQuery.fn.extend({
d_imagechange:function(setting){
// 修正IE6每次从服务器读取背景图片的BUG
document.execCommand("BackgroundImageCache", false, true);
var config = $.extend({
bg:true, // 是否背景色
title:true, // 是否有标题
desc:true, // 是否有描述
btn:false, // 是否显示按钮
repeat:'repeat', // 重复规则 'no-repeat' 'repeat-x' 'repeat-y' 'repeat'
bgColor:'#000', // 背景色
bgOpacity:.5, // 背景透明度
bgHeight:75, // 背景高
titleSize:14, // 标题文字大小
titleFont:'Verdana,宋体', // 标题文本字体
titleColor:'#000', // 标题文本颜色
titleTop:4, // 标题上边距
titleLeft:20, // 标题左边距
descSize:12, // 描述文字大小
descFont:'Verdana,宋体', // 描述文本字体
descColor:'#000', // 描述文本颜色
descTop:2, // 描述上边距
descLeft:20, // 描述左边距
btnColor:'#000', // 按钮颜色1
btnOpacity:.5, // 未选中按钮透明度
btnFont:'Verdana', // 按钮文本字体
btnFontSize:12, // 按钮文字大小(注重:Chrome有默认最小字号的限制)
btnFontColor:'#fff', // 按钮文本颜色
btnText:true, // 是否显示文本
btnWidth:20, // 按钮宽
btnHeight:20, // 按钮高
btnMargin:4, // 按钮间距
btnTop:4, // 按钮上边距
playTime:3000, // 轮换间隔时间,单位(毫秒)
animateTime:500, // 动画执行时间,单位(毫秒)
animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
width:980, // 宽, 不设定则从DOM读取
height:310 // 高, 不设定则从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(1)//_w)
.height(1)//config.bgHeight)
.css('background-image','url(images/slider_bg.png)')
// .css('opacity',config.bgOpacity)
.css('position','absolute')
.css('marginTop',10) //_h-config.bgHeight)
.css('zIndex',3333);
}
// 文字区
var _textArea =
$('').appendTo(_this)
.width(1)//_w)
.height(1)//config.bgHeight)
.css('position','absolute')
.css('marginTop',10) //_h-config.bgHeight)
.css('zIndex',-6666);
// 按钮区
var _btnArea =
$('').appendTo(_this)
.width((config.btnWidth+config.btnMargin)*_n)
.height(20)
.css('position','absolute')
.css('marginTop',270) //_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')
.css('height',20)
// .css('id','btn_'+i)
});
// 保存所有元素集合的引用,方便在事件中使用
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;}
_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);