jQuery als.js 跑马灯

Posted 2021-11-09 wuxu

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

---

下载