jQuery als.js 跑马灯

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

在线实例

实例演示

使用方法

<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

下载

时间: 2024-10-23 19:21:34

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

jQuery+CSS3文字跑马灯特效

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http

js跑马灯效果

function nextPage() {           /*         克隆第一张图片并添加到box后         box前移一张图片的距离动画         动画回调里把box的left值设为0 删除第一张图片         */        $(".mypng li:first-child").clone().appendTo($(".mypng"));        $(".mypng").animate({ lef

Js跑马灯效果 &amp;&amp; 在Vue中使用

DEMO: <!DOCTYPE html><html> <head> <title>滚动播报</title> <meta charset="UTF-8"> <style> .content { height: 60px; background-color: #2c2c34; overflow: hidden; } .content ul { white-space: nowrap; } .content

js抽奖跑马灯程序

js抽奖跑马灯程序 点击下载代码

js简单跑马灯案例

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跑马灯</title> <style type="text/css"> *{ margin: 0; padding: 0; } #bian{ width: 300px; height: 300px; margin:0 auto

原生js实现跑马灯抽奖效果

目前好多的微信活动都有一些抽奖活动,其中就有跑马灯. <!DOCTYPE html> <html> <head> <title>跑马灯效果</title> <style> table .pao{ border:1px solid #e5e5e5; padding:10px 20px; } table .on{ border-color:red; color:red; } </style> <script> wi

【HTML】 向网页&lt;Title&gt;&lt;/Title&gt;中插入图片以及跑马灯

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> </style> <title> 欢迎来到我的主页界面</title> <!--引入图片--> <link href="images/titleIcon.ico" rel="

jCarousel Lite 实现图片跑马灯效果

官方网站:http://www.gmarwaha.com/jquery/jcarousellite/ demo: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script src="http://libs.baidu.com/jquery/1.9.0/jquer

jq跑马灯效果

这几天公司产品有个无缝循环滚动的广告跑马灯要做,最开始想到的是<marquee>标签,但在PC端正常,在安卓广告屏上却怎么都跑不动,后来用的css3的animation,结果也是PC端及其他一些手机正常,但一到安卓广告屏上就跑不动了:后来领导找了个jQuery插件,经测试,完美运行. <!doctype html> <html lang="en"> <head> <meta charset="UTF-8">