Koala是一款简单而实用的jQuery焦点图幻灯片插件,焦点图不仅可以在播放图片的时候让图片有淡入淡出的动画效果,而且图片可以自动播放。该jQuery焦点图的每一张图片都可以设置文字描述,并浮动在图片之上。由于其简单的配置,这款jQuery焦点图可以很方便地与你的网站相结合。
使用方法
引入核心文件
<link href="css/jqcool.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/koala.min.1.5.js"></script>
构建html代码
<
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; "
></
a
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>红三代叶明子太庙办盛典 白色羽毛装高贵动人</
a
></
span
>
</
div
>
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/02.jpg"
style
=
"opacity: 1; "
></
a
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>佟大为登封面表情搞怪 成熟男人也是天真男孩</
a
></
span
>
</
div
>
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/03.jpg"
style
=
"opacity: 1; "
></
a
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>21岁出柜超模巴厘自曝搞笑全裸照</
a
></
span
>
</
div
>
<
div
class
=
"fcon"
style
=
"display: none;"
>
<
a
href
=
"http://www.jqcool.net/"
><
img
src
=
"images/04.jpg"
style
=
"opacity: 1; "
></
a
>
<
span
class
=
"shadow"
><
a
href
=
"#"
>金喜善出道21年 皮肤白皙越长越“嫩”!</
a
></
span
>
</
div
>
</
div
>
<
div
class
=
"fbg"
>
<
div
class
=
"D1fBt"
id
=
"D1fBt"
>
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>1</
i
></
a
>
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>2</
i
></
a
>
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
"current"
><
i
>3</
i
></
a
>
<
a
href
=
"javascript:void(0)"
hidefocus
=
"true"
target
=
"_self"
class
=
""
><
i
>4</
i
></
a
>
</
div
>
</
div
>
<
span
class
=
"prev"
></
span
>
<
span
class
=
"next"
></
span
>
</
div
>
写入JS初始化插件
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
//** 停顿时间
})
})