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. 设置Form窗体中的控件的属性

    借助于反射,可获取当前窗体中的所有控件,根据需要设置它们的属性. Font defaultFont = new System.Drawing.Font("Microsoft Sans Ser ...

  2. ASP.NET MVC 4 Optimization的JS/CSS文件动态合并及压缩

    JS/CSS文件的打包合并(Bundling)及压缩(Minification)是指将多个JS或CSS文件打包合并成一个文件,并在网站发布之后进行压缩,从而减少HTTP请求次数,提高网络加载速度和页面 ...

  3. HTML的16个全局属性

    前面的话 在HTML中,属性能表达相当丰富的语义,而且属性也会额外提供很多实用的功能,HTML共支持16个常见的全局属性. HTML原有属性 accesskey 作用:浏览器用来创建激活或聚焦元素的快 ...

  4. CSS3入门之边框与背景

    CSS3入门之边框与背景 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: 0 !im ...

  5. Java多线程系列--“JUC线程池”04之 线程池原理(三)

    转载请注明出处:http://www.cnblogs.com/skywang12345/p/3509960.html 本章介绍线程池的生命周期.在"Java多线程系列--“基础篇”01之 基 ...

  6. C/C++:提升_头文件的使用

    C/C++:提升_头文件的使用 ◇写在前面 学到现在,很多人编写程序时只会使用一个文件.这样在代码量较小的时候,更利于表达程序,但是随着代码量的逐步增加,程序的思维逻辑不是我们一下子就可以完全理清的, ...

  7. TortoiseSVN安装以及淘宝 TAE SDK 开发环境的搭建

    一.TortoiseSVN 的下载和安装 1.进入TortoiseSVN 官网下载地址http://tortoisesvn.net/downloads.html,根据自己的操作系统位数下载相应最新版本 ...

  8. Windows Azure Web Site (6) 使用FTP发布Azure Web Site

    <Windows Azure Platform 系列文章目录> 笔者在之前的文章中介绍的都是使用IDE,也就是Visual Studio,将本地的aspx发布到Azure Web Site ...

  9. Microsoft Azure News(2) 在Microsoft Azure上运行SAP应用程序

    <Windows Azure Platform 系列文章目录> 2014年6月27日消息,在 Microsoft Azure 上提供 SAP Business Suite 软件.All-I ...

  10. js基础篇——cookie使用要点

    1.Cookie数量和长度的限制.各个浏览器的限制不同IE7+和Firefox最大限制为50条,chrome和Safari无限制,IE6-最大限制20条.且所有浏览器限制每个cookie长度不能超过4 ...