jquery.d.imagechange.js
7.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
/********************************************************************************************************
* D-ImageChange
*----------------------------------------------------------------------------------------------------
* @Desc 图片轮换插件
**/
// 修正IE6每次从服务器读取背景图片的BUG
try {
document.execCommand('BackgroundImageCache', false, true);
}catch(e){
}
(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:.5, // 背景透明度
bgHeight:40, // 背景高
titleSize:14, // 标题文字大小
titleFont:'Verdana,宋体', // 标题文本字体
titleColor:'#FFF', // 标题文本颜色
titleTop:4, // 标题上边距
titleLeft:4, // 标题左边距
descSize:12, // 描述文字大小
descFont:'Verdana,宋体', // 描述文本字体
descColor:'#FFF', // 描述文本颜色
descTop:2, // 描述上边距
descLeft:4, // 描述左边距
btnColor:'#FFF', // 按钮颜色1
btnOpacity:.5, // 未选中按钮透明度
btnFont:'Verdana', // 按钮文本字体
btnFontSize:12, // 按钮文字大小(注意:Chrome有默认最小字号的限制)
btnFontColor:'#000', // 按钮文本颜色
btnText:true, // 是否显示文本
btnWidth:15, // 按钮宽
btnHeight:15, // 按钮高
btnMargin:4, // 按钮间距
btnTop:4, // 按钮上边距
playTime:3000, // 轮换间隔时间,单位(毫秒)
animateTime:500, // 动画执行时间,单位(毫秒)
animateStyle:'o', // 动画效果:'o':渐显 'x':横向滚动 'y':纵向滚动 'show':原地收缩伸展 'show-x':横向收缩伸展 'show-y':纵向收缩伸展' none':无动画
width:300, // 宽, 不设定则从DOM读取
height:200 // 高, 不设定则从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){
$('<div />').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 =
$('<div />').appendTo(_this)
.width(_w)
.height(config.bgHeight)
.css('position','absolute')
.css('marginTop',_h-config.bgHeight)
.css('zIndex',6666);
// 按钮区
var _btnArea =
$('<div />').appendTo(_this)
//.width(config.data.length * (config.btnWidth + config.btnMargin))
//.height(config.bgHeight)
.css('position','absolute')
//.css('marginTop',_h-config.bgHeight)
//.css('marginLeft',_w-(config.btnWidth+config.btnMargin)*_n)
.css('zIndex',6667)
.css('display',config.btn?'block':'none')
.addClass("fx_btn");
// 插入空div修正IE的绝对定位BUG
$('<div />').appendTo(_this);
// 图片区
var _imgArea =
$('<div />').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){
$('<a />').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('+QGlobal.Common.QGetImages(n.src, 'source', 'taobaocmshtml')+')')
.css('background-repeat',config.repeat)
.css('background-position','center')
.css('display','block')
.css('float','x,show-x'.indexOf(config.animateStyle)!=-1?'left':'');
if(config.title){
$('<b />').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){
$('<p />').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);
}
$('<a />').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("fx_a")
});
// 保存所有元素集合的引用,方便在事件中使用
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);