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

在线实例

实例演示

使用方法

<div id="lista1" class="als-container">  
    <span class="als-prev"><img src="data: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="data:images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li>  
            <li class="als-item"><a href="#" target="_blank"> <img src="data:images/als-images/light_bulb.png" alt="light_bulb" /> jQuery手机各种下拉菜单效果加搜索输入框</a></li>  
        </ul>  
    </div>  
    <span class="als-next"><img src="data: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

jQuery als.js 跑马灯的更多相关文章

  1. jQuery+CSS3文字跑马灯特效

    jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/te ...

  2. JS跑马灯

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEA ...

  3. jquery的浪漫(跑马灯 + 雪花飘落)

    jquery的浪漫 主要用到知识点: 鼠标事件onmousedown() onmousemove() onmouseup() jquery的运用,对dom元素的增删改查 css3 3d 功能的灵活运用 ...

  4. js 上下滚动加停顿效果,js 跑马灯加停顿效果

    <div id="middle"> <ul id="slide1"> <li>尾号1183的用户刚刚领取了 78.23元 的 ...

  5. JS 跑马灯

    利用jquery 来实现图片切换.文字转换移动的工具. MSClass 连接 http://www.popub.net/script/MSClass.html Mark 用

  6. js跑马灯效果

    function nextPage() {           /*         克隆第一张图片并添加到box后         box前移一张图片的距离动画         动画回调里把box的 ...

  7. Js跑马灯效果 && 在Vue中使用

    DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charse ...

  8. jquery.marquee.js - 有点奇怪的跑马灯动画,不过还是加上去了

    客户想要一个跑马灯的效果,最终我用了jquery.marquee.js. 这个库很简单就能用. 效果是这样,从左到右,移动速度都不一样. 1. HTML <div class="mar ...

  9. 使用 JS 实现文字左右跑马灯

    Ø  前言 其实,前面两篇已经基本上实现了图片.文字跑马灯,这里为什么还要学下文字左右跑马灯呢?因为,虽然基本一样,但实现起来还是有很大不同的,所以为了完整再补充一下.代码如下: 1.   首先定义 ...

随机推荐

  1. css多行文本省略号问题

    已知,单行文本溢出内容用省略号代替,css代码如下: text-overflow: ellipsis; 溢出部分用...代替 white-space: nowrap; //强制在一行显示 overfl ...

  2. C# XmlReader

    一个非常全面的XML解析类 using System; using UnityEngine; using System.Xml; using System.Collections; using Uni ...

  3. Spark MLlib - Decision Tree源码分析

    http://spark.apache.org/docs/latest/mllib-decision-tree.html 以决策树作为开始,因为简单,而且也比较容易用到,当前的boosting或ran ...

  4. poj 2226 Muddy Fields(合理建图+二分匹配)

    /* 题意:用木板盖住泥泞的地方,不能盖住草.木板任意长!可以重叠覆盖! '*'表示泥泞的地方,'.'表示草! 思路: 首先让我们回忆一下HDU 2119 Matrix这一道题,一个矩阵中只有0, 1 ...

  5. 包管理器Bower

    今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址: http://bower.i ...

  6. 牛顿法与拟牛顿法学习笔记(五)L-BFGS 算法

    机器学习算法中经常碰到非线性优化问题,如 Sparse Filtering 算法,其主要工作在于求解一个非线性极小化问题.在具体实现中,大多调用的是成熟的软件包做支撑,其中最常用的一个算法是 L-BF ...

  7. 在ASPNET中使用JS集锦

    (一).确认删除用法: 1. BtnDel.Attributes.Add("onclick","return confirm('"+"确认删除?&qu ...

  8. 最简明的JavaScript闭包解释

    最简明的JavaScript闭包解释 JavaScript是这几年最火的编程语言之一,从前端到服务器端,再到脚本,好像没有一个地方没有JavaScript的身影.这个世界上任何的一种事物的存在必然有其 ...

  9. JAVA 设计模式 模板方法模式

    定义 模板方法模式 (Template Method) 定义了一个操作中的算法的骨架,而将部分步骤的实现在子类中完成. 模板方法模式使得子类可以不改变一个算法的结构即可重定义该算法的某些特定步骤. 模 ...

  10. 高性能Web系统设计方案(初稿目录),支持者进

    第一部分 客户端篇 1.压缩js.css,将js的引入放在</html>之前; 2.合并一个页面下的js/css文件,压缩传输.(SquishIt) 相关博文 3.ajax技术应用.aja ...