常用的jQuery als.js 跑马灯

ali.js是一款滚动插件,滚动的内容可包含文字和图片。它的API也很强大,包括滚动区域可见个数、每次滚动个数、滚动方向、是否循环滚动、是否自动滚动、滚动间隔时间、滚动动画速度、动画效果、滚动方向以及开始滚动索引。

在线实例

实例演示

使用方法

  1. <div id="lista1" class="als-container">  
  2.     <span class="als-prev"><img src="images/thin_left_arrow_333.png" alt="prev" title="previous" /></span>  
  3.     <div class="als-viewport">  
  4.         <ul class="als-wrapper">  
  5.             <li class="als-item"><a href="#" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li>  
  6.             <li class="als-item"><a href="#" target="_blank"> <img src="images/als-images/light_bulb.png" alt="light_bulb" /> jQuery手机各种下拉菜单效果加搜索输入框</a></li>  
  7.         </ul>  
  8.     </div>  
  9.     <span class="als-next"><img src="images/thin_right_arrow_333.png" alt="next" title="next" /></span>  
  10. </div>
  11. $("#lista1").als({ 
  12.     visible_items: 4, //可见个数 
  13.     scrolling_items: 2, //每次滚动个数 
  14.     orientation: "horizontal", //滚动方向 
  15.     circular: "yes", //是否循环滚动 
  16.     autoscroll: "no", //自动播放 
  17.     interval: 5000, //滚动间隔时间 
  18.     speed: 500, //滚动动画速度 
  19.     easing: "linear", //动画效果 
  20.     direction: "right", //滚动方向 
  21.     start_from: 0 //初始化索引,从0开始 
  22. });
复制

参数详解

参数描述默认值
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

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值