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 |