als.js演示4种不同的标题和图片滚动方式

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

演示一：ul列表滚动html代码

<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="http://www.erdangjiade.com/js/614.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li> 
            <li class="als-item"><a href="http://www.erdangjiade.com/js/615.html" 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开始
});

演示二：div结构+垂直滚动

<div id="lista2" class="als-container"> 
    <span class="als-prev"><img src="images/thin_top_arrow_333.png" alt="prev" title="previous" /></span> 
    <div class="als-viewport"> 
        <div class="als-wrapper"> 
            <div class="als-item">
                <a href="http://www.erdangjiade.com/js/528.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> swipe多种手机触屏滑动效果</a>
            </div> 
            <div class="als-item">
                <a href="http://www.erdangjiade.com/js/529.html" target="_blank"> <img src="images/als-images/light_bulb.png" alt="light_bulb" /> PHP在线生成word文档</a>
            </div>  
        </div> 
    </div> 
    <span class="als-next"><img src="images/thin_bottom_arrow_333.png" alt="next" title="next" /></span> 
</div>

$("#lista2").als({
    visible_items: 2,
    scrolling_items: 1,
    orientation: "vertical",
    circular: "yes",
    autoscroll: "no",
    start_from: 1
});

演示三：水平滚动、自动滚动、可见元素个数、滚动阶梯、间隔时间（秒）

$("#demo3").als({
    visible_items: 4,
    scrolling_items: 2,
    orientation: "horizontal",
    circular: "yes",
    autoscroll: "yes",
    interval: 4000
});

演示四：简单水平滚动、手动滚动、滚动阶梯、初始化第几个开始滚动（从0开始）

$("#demo4").als({ visible_items: 4, scrolling_items: 2, orientation: "horizontal", circular: "yes", autoscroll: "no", start_from: 2 });

alsAPI参数