zoukankan      html  css  js  c++  java
  • jQuery als.js 跑马灯

    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

  • 相关阅读:
    pyspider 在ubuntu上安装失败怎么搞?
    怎么在项目中使用前端包管理器bower和构建工具gulp
    Asp.net mvc 实时生成缩率图到硬盘
    如果转载优酷、土豆视频等,怎么让视频自适应宽度?
    C语言II博客作业04
    C语言I博客作业03
    C语言II博客作业02
    C语言II博客作业01
    学期总结
    The first essay
  • 原文地址:https://www.cnblogs.com/wuxu/p/10600941.html
Copyright © 2011-2022 走看看