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. SSIS的CheckPoint用法

    在SSIS的Package Property中有CheckPoints的属性目录,CheckPoint是SSIS的Failover Feature.通过简单的配置CheckPoint,能够在Packa ...

  2. How to load a local .CSS file & JavaScript resources using iPhone UIWebView Class

    This post will cover the basic setup and creation of an application with web content for iPhone that ...

  3. .NET面试题解析(03)-string与字符串操作

      系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 字符串可以说是C#开发中最常用的类型了,也是对系统性能影响很关键的类型,熟练掌握字符串的操作非常重要. 常 ...

  4. 编译原理LL1文法Follow集算法实现

    import hjzgg.first.First; import java.util.LinkedHashMap; import java.util.Map; import java.util.Set ...

  5. 34988 Happy Reversal(二进制去取反)

    /* 题意:给多个二进制数,对某些数进行按位取反操作! 然后从中找到最大数和最小数,并输出他们的差值! 注意:所有的数都是整数,包括取反之后 思路:一个n为二进制数x,令tmp为n位全1!则 y=tm ...

  6. 推荐一个算法编程学习中文社区-51NOD【算法分级,支持多语言,可在线编译】

    最近偶尔发现一个算法编程学习的论坛,刚开始有点好奇,也只是注册了一下.最近有时间好好研究了一下,的确非常赞,所以推荐给大家.功能和介绍看下面介绍吧.首页的标题很给劲,很纯粹的Coding社区....虽 ...

  7. 利用Dapper ORM搭建三层架构

    利用Dapper关系对象映射器写的简单的三层架构.Dapper:StackOverFlow在使用的一个微型的ORM,框架整体效率较高,轻量级的ORM框架.网上有较多的扩展.此处只是简单的调用Dappe ...

  8. 学习使用 jQuery & CSS3 制作照片堆栈效果

    在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...

  9. asp.Net获取脚本传过来的参数的方法汇总

    最基础的知识啦,不过,还是记下来吧. 接收用get 方法传输的数据的写法: string userName= Request.QueryString["name"]; 接收用pos ...

  10. EF总结

    1.Entity Framework 查询历史最严重bug求解十万火急 2.http://www.cnblogs.com/badly1984/p/3203565.html 3.Entity Frame ...