本文转自http://www.oschina.net/code/snippet_206691_11515?p=3#comments
特点：兼容IE6+，Chrome，Firefox，Opera，safari，可左右，可上下，可快可慢，可指定默认显示第N张，自由设定，代码简洁，运行效率高，用户体验良好:) ！！感谢各位朋友的热心反馈！！ ＝update log＝＝2015.01.23 新增：播放顺序为12341234 修复：频繁悬停后，滚动错乱 ＝update log＝＝2014.04.30 新增：按键鼠标经过阻止事件冒泡 修复：频繁悬停后，滚动错乱 ＝update log＝＝2013.03.14 新增：可手动设置尺寸，若未设置，自动采用第一张图片尺寸 修复：鼠标经过再离开时，增加一个延时时长，再循环到下一张 ＝update log＝＝2012.08.09 新增：底栏可设置隐藏 修复：滚动方式由原来的1-2-3-4-1-2-3-4... 修改为 1-2-3-4-3-2-1...，滚动效果更平滑 ＝update log＝＝2012.07.05 修复：设置各LI元素为第一张图片的尺寸，防止后续若有小图导致整体位置错乱 ＝update log＝＝2012.06.30 修复：IE下显示边框，滚动重叠问题 新增：点选按键隐藏设置，默认2秒后隐藏，按键样式，可圆可方（IE8-只方不圆） 演示地址：http://ishere.cn/demo/jquery.slideBox/
1. [图片] 方形按键，显示
2. [图片] 按键自动隐藏
3. [图片] 圆形按键
4. [图片] 隐藏底栏
5. [代码]jquery.slideBox.css
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
@charset
"utf-8"
;
html, body {
font-family
:
"微软雅黑"
}
/*
* jQuery图片轮播(焦点图)插件
* ADD.JENA.201206291027
* EDIT.JENA.201206300904
* Author: jena
* Demo: http://ishere.cn/demo/jquery.slidebox/
*/
div.slideBox{
position
:
relative
;
width
:
670px
;
height
:
300px
;
overflow
:
hidden
;}
div.slideBox ul.items{
position
:
absolute
;
float
:
left
;
background
:
none
;
list-style
:
none
;
padding
:
0px
;
margin
:
0px
;}
div.slideBox ul.items li{
float
:
left
;
background
:
none
;
list-style
:
none
;
padding
:
0px
;
margin
:
0px
;}
div.slideBox ul.items li a{
float
:
left
;
line-height
:
normal
!important
;
padding
:
0px
!important
;
border
:
none
/*For IE.ADD.JENA.201206300844*/
;}
div.slideBox ul.items li a img{
margin
:
0px
!important
;
padding
:
0px
!important
;
display
:
block
;
border
:
none
/*For IE.ADD.JENA.201206300844*/
;}
div.slideBox div.tips{
position
:
absolute
;
bottom
:
0px
;
width
:
100%
;
height
:
50px
;
background-color
:
#000
;
overflow
:
hidden
;}
div.slideBox div.tips div.title{
position
:
absolute
;
left
:
0px
;
top
:
0px
;
height
:
100%
;}
div.slideBox div.tips div.title a{
color
:
#FFF
;
font-size
:
18px
;
line-height
:
50px
;
margin-left
:
10px
;
text-decoration
:
none
;}
div.slideBox div.tips div.title a:hover{
text-decoration
:
underline
!important
;}
div.slideBox div.tips div.nums{
position
:
absolute
;
right
:
0px
;
top
:
0px
;
height
:
100%
;}
div.slideBox div.tips div.nums a{
display
:inline-
block
; >
float
:
left
/*For IE.ADD.JENA.201206300844*/
;
width
:
20px
;
height
:
20px
;
background-color
:
#FFF
;
text-indent
:
-99999px
;
margin
:
15px
10px
0px
0px
;}
div.slideBox div.tips div.nums a.active{
background-color
:
#093
;}
|
6. [代码]jquery.slideBox.js
|
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
|
/*
* jQuery图片轮播(焦点图)插件
* ADD.JENA.201206291027
* EDIT.JENA.201206300904
* EDIT.JENA.201207051027
* EDIT.JENA.201208090849
* EDIT.JENA.201501231440
* Version: 2.2.1440
* Author: jena
* Demo: http://ishere.cn/demo/jquery.slidebox/
*/
(
function
($) {
$.fn.slideBox =
function
(options) {
//默认参数
var
defaults = {
direction :
'left'
,
//left,top
duration : 0.6,
//unit:seconds
easing :
'swing'
,
//swing,linear
delay : 3,
//unit:seconds
startIndex : 0,
hideClickBar :
true
,
clickBarRadius : 5,
//unit:px
hideBottomBar :
false
};
var
settings = $.extend(defaults, options || {});
//计算相关数据
var
wrapper = $(
this
), ul = wrapper.children(
'ul.items'
), lis = ul.find(
'li'
), firstPic = lis.first().find(
'img'
);
var
li_num = lis.size(), li_height = 0, li_width = 0;
//初始化
var
init =
function
(){
if
(!wrapper.size())
return
false
;
wrapper.data(
'over'
, 0);
li_height = lis.first().height();
li_width = lis.first().width();
wrapper.css({width: li_width+
'px'
, height:li_height+
'px'
});
lis.css({width: li_width+
'px'
, height:li_height+
'px'
});
//ADD.JENA.201207051027
ul.append(ul.find(
'li:first'
).clone());
li_num += 1;
if
(settings.direction ==
'left'
) {
ul.css(
'width'
, li_num * li_width +
'px'
);
}
else
{
ul.css(
'height'
, li_num * li_height +
'px'
);
}
ul.find(
'li:eq('
+settings.startIndex+
')'
).addClass(
'active'
);
if
(!settings.hideBottomBar){
//ADD.JENA.201208090859
var
tips = $(
''
).css(
'opacity'
, 0.6).appendTo(wrapper);
var
title = $(
''
).html(
function
(){
var
active = ul.find(
'li.active'
).find(
'a'
), text = active.attr(
'title'
), href = active.attr(
'href'
);
}).appendTo(tips);
var
nums = $(
''
).hide().appendTo(tips);
lis.each(
function
(i, n) {
var
a = $(n).find(
'a'
), text = a.attr(
'title'
), href = a.attr(
'href'
), css =
''
;
i == settings.startIndex && (css =
'active'
);
$(
''
).attr(
'href'
, href).text(text).addClass(css).css(
'borderRadius'
, settings.clickBarRadius+
'px'
).mouseover(
function
(){
wrapper.data(
'over'
, 1);
$(
this
).addClass(
'active'
).siblings().removeClass(
'active'
);
ul.find(
'li:eq('
+$(
this
).index()+
')'
).addClass(
'active'
).siblings().removeClass(
'active'
);
start();
}).appendTo(nums);
});
if
(settings.hideClickBar){
//ADD.JENA.201206300847
tips.hover(
function
(){
nums.animate({top:
'0px'
},
'fast'
);
},
function
(){
nums.animate({top: tips.height()+
'px'
},
'fast'
);
});
nums.show().delay(2000).animate({top: tips.height()+
'px'
},
'fast'
);
}
else
{
nums.show();
}
}
lis.size()>1 && start();
};
//开始轮播
var
start =
function
() {
var
active = ul.find(
'li.active'
), active_a = active.find(
'a'
);
var
index = active.index();
if
(settings.direction ==
'left'
){
offset = index * li_width * -1;
param = {
'left'
:offset +
'px'
};
}
else
{
offset = index * li_height * -1;
param = {
'top'
:offset +
'px'
};
}
wrapper.find(
'.nums'
).find(
'a:eq('
+index+
')'
).addClass(
'active'
).siblings().removeClass(
'active'
);
wrapper.find(
'.title'
).find(
'a'
).attr(
'href'
, active_a.attr(
'href'
)).text(active_a.attr(
'title'
));
// EDIT.JENA.20150123
ul.stop().animate(param, settings.duration*1000, settings.easing,
function
() {
active.removeClass(
'active'
);
if
(active.next().size()==0){
ul.css({top:0, left:0}).find(
'li:eq(1)'
).addClass(
'active'
);
wrapper.find(
'.nums'
).find(
'a:first'
).addClass(
'active'
).siblings().removeClass(
'active'
);
}
else
{
active.next().addClass(
'active'
);
}
wrapper.data(
'over'
)==0 && wrapper.data(
'timeid'
, window.setTimeout(start, settings.delay*1000));
});
};
//停止轮播
var
stop =
function
() {
window.clearTimeout(wrapper.data(
'timeid'
));
};
//鼠标经过事件
wrapper.hover(
function
(){
wrapper.data(
'over'
, 1);
stop();
},
function
(){
wrapper.data(
'over'
, 0);
start();
});
//首张图片加载完毕后执行初始化
var
imgLoader =
new
Image();
imgLoader.onload =
function
(){
imgLoader.onload =
null
;
init();
};
imgLoader.src = firstPic.attr(
'src'
);
};
})(jQuery);
|
7. [代码]index.html
|
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
|
<
html
>
<
head
>
<
meta
charset
=
"utf-8"
>
<
title
>jQuery图片轮播(焦点图)插件
<
link
href
=
"css/jquery.slideBox.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
src
=
"js/jquery-1.7.1.min.js"
type
=
"text/javascript"
>
<
script
src
=
"js/jquery.slideBox.js"
type
=
"text/javascript"
>
<
script
>
jQuery(function($){
$('#demo1').slideBox();
$('#demo2').slideBox({
direction : 'top',//left,top#方向
duration : 0.3,//滚动持续时间，单位：秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间，单位：秒
startIndex : 1//初始焦点顺序
});
$('#demo3').slideBox({
duration : 0.3,//滚动持续时间，单位：秒
easing : 'linear',//swing,linear//滚动特效
delay : 5,//滚动延迟时间，单位：秒
hideClickBar : false,//不自动隐藏点选按键
clickBarRadius : 10
});
});
<
body
>
<
h3
>一、左右轮播，滚动持续0.6秒，滚动延迟3秒，滚动效果swing，初始焦点第1张，点选按键自动隐藏，按键边框半径（IE8-不支持）5px（以上各项为默认设置值）
<
div
id
=
"demo1"
class
=
"slideBox"
>
<
ul
class
=
"items"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题一"
><
img
src
=
"img/1.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题二"
><
img
src
=
"img/2.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题三"
><
img
src
=
"img/3.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题四"
><
img
src
=
"img/4.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题五"
><
img
src
=
"img/5.jpg"
>
<
h3
>二、上下轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第2张，点选按键自动隐藏
<
div
id
=
"demo2"
class
=
"slideBox"
>
<
ul
class
=
"items"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题一"
><
img
src
=
"img/1.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题二"
><
img
src
=
"img/2.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题三"
><
img
src
=
"img/3.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题四"
><
img
src
=
"img/4.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题五"
><
img
src
=
"img/5.jpg"
>
<
h3
>三、左右轮播，滚动持续0.3秒，滚动延迟5秒，滚动效果linear，初始焦点第1张，点选按键不隐藏，按键边框半径10px（圆形）
<
div
id
=
"demo3"
class
=
"slideBox"
>
<
ul
class
=
"items"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题一"
><
img
src
=
"img/1.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题二"
><
img
src
=
"img/2.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题三"
><
img
src
=
"img/3.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题四"
><
img
src
=
"img/4.jpg"
>
<
li
><
a
href
=
"go/to/your/url.html"
title
=
"这里是测试标题五"
><
img
src
=
"img/5.jpg"
>
<
h4
>爱我的老婆孩子！献给香港回归祖国15周年，哈哈！！
|