68素材站

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

68素材 3332 0
als.js演示4种不同的标题和图片滚动方式
查看演示:暂无演示
附加服务:安装、调试(根据实际情况额外收费)
已下载 168 收藏
特效分类图片特效 文件大小0.46 MB 需要授权无需授权 是否开源开源
详细说明

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

演示一: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.sucaihuo.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.sucaihuo.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.sucaihuo.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.sucaihuo.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参数

参数描述默认值
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


发表评论 (已有0条评论)

还木有评论哦,快来抢沙发吧~