jQuery可自动播放动画焦点图插件Koala
Koala是一款简单而实用的jQuery焦点图幻灯片插件，焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果，而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述，并浮动在图片之上。由于其简单的配置，这款jQuery焦点图可以很方便地与你的网站相结合。
使用方法
引入核心文件
|
1
2
|
<
link
href
=
"css/jqcool.css"
rel
=
"stylesheet"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"js/koala.min.1.5.js"
>
|
构建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
|
<
div
id
=
"fsD1"
class
=
"focus"
style
=
"margin-left:400px"
>
<
div
id
=
"D1pic1"
class
=
"fPic"
>
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/01.jpg"
style
=
"opacity: 1; "
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>红三代叶明子太庙办盛典 白色羽毛装高贵动人
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/02.jpg"
style
=
"opacity: 1; "
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>佟大为登封面表情搞怪 成熟男人也是天真男孩
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/03.jpg"
style
=
"opacity: 1; "
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>21岁出柜超模巴厘自曝搞笑全裸照
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/04.jpg"
style
=
"opacity: 1; "
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>金喜善出道21年 皮肤白皙越长越“嫩”！
<
div
class
=
"fbg"
>
<
div
class
=
"D1fBt"
id
=
"D1fBt"
>
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>1
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>2
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
"current"
><
i
>3
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>4
<
span
class
=
"prev"
>
<
span
class
=
"next"
>
|
写入JS初始化插件
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
Qfast.add(
'widgets'
, { path:
"js/terminator2.2.min.js"
, type:
"js"
, requires: [
'fx'
] });
Qfast(
false
,
'widgets'
,
function
() {
K.tabs({
id:
'fsD1'
,
//焦点图包裹id
conId:
"D1pic1"
,
//** 大图域包裹id
tabId:
"D1fBt"
,
tabTn:
"a"
,
conCn:
'.fcon'
,
//** 大图域配置class
auto: 1,
//自动播放 1或0
effect:
'fade'
,
//效果配置
eType:
'click'
,
//** 鼠标事件
pageBt:
true
,
//是否有按钮切换页码
bns: [
'.prev'
,
'.next'
],
//** 前后按钮配置class
interval: 3000
//** 停顿时间
})
})
|