jQuery als.js 跑马灯

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

猜你喜欢

转载自www.cnblogs.com/wuxu/p/10600941.html
今日推荐