ali.js是一款滚动插件,滚动的内容可包含文字和图片。它的API也很强大,包括滚动区域可见个数、每次滚动个数、滚动方向、是否循环滚动、是否自动滚动、滚动间隔时间、滚动动画速度、动画效果、滚动方向以及开始滚动索引。
在线实例
使用方法
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<div id=
"lista1"
class
=
"als-container"
>
<span
class
=
"als-prev"
><img src=
"images/thin_left_arrow_333.png"
alt=
"prev"
title=
"previous"
/></span>
<div
class
=
"als-viewport"
>
<ul
class
=
"als-wrapper"
>
<li
class
=
"als-item"
><a href=
"#"
target=
"_blank"
> <img src=
"images/als-images/calculator.png"
alt=
"calculator"
/> jQuery环状圆形菜单</a></li>
<li
class
=
"als-item"
><a href=
"#"
target=
"_blank"
> <img src=
"images/als-images/light_bulb.png"
alt=
"light_bulb"
/> jQuery手机各种下拉菜单效果加搜索输入框</a></li>
</ul>
</div>
<span
class
=
"als-next"
><img src=
"images/thin_right_arrow_333.png"
alt=
"next"
title=
"next"
/></span>
</div>
$(
"#lista1"
).als({
visible_items: 4,
//可见个数
scrolling_items: 2,
//每次滚动个数
orientation:
"horizontal"
,
//滚动方向
circular:
"yes"
,
//是否循环滚动
autoscroll:
"no"
,
//自动播放
interval: 5000,
//滚动间隔时间
speed: 500,
//滚动动画速度
easing:
"linear"
,
//动画效果
direction:
"right"
,
//滚动方向
start_from: 0
//初始化索引,从0开始
});
|
参数详解
参数 | 描述 | 默认值 |
visible_items | 可见个数 | 3 |
scrolling_items | 每次滚动个数 | 1 |
orientation | 滚动方向,可选'horizontal','vertical' | horizontal |
circular | 是否循环滚动 | no |
autoscroll | 是否自动滚动 | no |
interval | 滚动间隔时间 毫秒 | 4000 |
speed | 滚动动画速度 毫秒 | 600 |
easing | 动画效果,可选参数'linear','swing' | swing |
direction | 滚动方向,可选参数'left','right','down','up' | left |
start_from | 开始滚动索引 | 0 |