
演示一: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="https://jy.tp.yuanmeng.life/js/614.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> jQuery环状圆形菜单</a></li>
<li class="als-item"><a href="https://jy.tp.yuanmeng.life/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="https://jy.tp.yuanmeng.life/js/528.html" target="_blank"> <img src="images/als-images/calculator.png" alt="calculator" /> swipe多种手机触屏滑动效果</a>
</div>
<div class="als-item">
<a href="https://jy.tp.yuanmeng.life/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*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
