jQuery可自动播放动画焦点图插件Koala
来源:互联网 发布:蓝牙模块调试软件 编辑:程序博客网 时间:2024/05/18 00:58
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"
></
script
>
构建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; "
></
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初始化插件
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
//** 停顿时间
})
})
0 0
- jQuery可自动播放动画焦点图插件Koala
- 14款华丽的最新jQuery焦点图动画插件
- jQuery焦点图插件编写
- jQuery实现焦点图播放效果
- 根据EditText焦点播放Rotate动画时,第一次进入页面所有动画都自动开始
- Jquery焦点图插件的HTML代码
- Jquery焦点图/幻灯片效果 插件 KinSlideshow
- 推荐一款焦点图jQuery插件 SlidesJs
- jQuery图片轮播(焦点图)插件
- 推荐一款焦点图jQuery插件 SlidesJs
- 轻量级jQuery带底栏轮播(焦点图)插件slideBox
- 可控制GIF动画图片播放和暂停jQuery插件
- jQuery实现焦点图自动切换
- jquery延时载入动画焦点图- 有点类似视差动画
- jquery实现图片左右间隔滚动特效(可自动播放)
- jquery实现图片左右间隔滚动特效(可自动播放)
- 焦点图片(自动播放 不限图片张数 可左右控制)
- JS带纵向缩略图的焦点图片切换(可自动播放 五幅)
- python 列出文件目录下所有文件
- 正在熟练使用中的vim操作
- OpenStack源码分析之Nova-Compute服务启动过程(icehouse)
- C++中的static关键字
- [IOS 开发] 反射
- jQuery可自动播放动画焦点图插件Koala
- Android:interpolator用法
- Java执行wmic命令获取系统环境变量
- Maven学习
- Android如何保证自己的服务被系统kill后又被系统重启?
- java网络编程之旅
- Java异常处理机制【转载】
- 内核同步基础知识
- c++静态数组和动态数组