最近用MUI做APP的混合开发的时候,遇到了两种跑马灯的功能需求,一种横向左右播放,再MUI的事例中有,但是上下播放再官方文档中没找到,就查了下资料,发现用JS可以完成该功能。
在页面中引入jquery.carouFredSel-6.1.0-packed.js(版本随意)
HTML部分
<!-- 消息轮播 -->
<div id="carousel">
<div id="msg"><a>19-05-10 10:21 用户123****1223充值「100」</a></div>
<div id="msg"><a>19-05-10 10:21 用户155****4321充值「200」</a></div>
<div id="msg"><a>19-05-10 10:21 用户181****3423充值「300」</a></div>
</div>
JS部分
$(function() {
$('#carousel').carouFredSel(
responsive: true,
direction: 'down',
height: '26%',
items: {
height: 100,
width: '750%',
visible: {
min: 1,
max: 1
}
},
scroll: {
items: '-1'
}
});
});
关于滚动方向,可以修改参数”direction“,默认值是”left“ 向左,可修改为”right“,”up“,”down“,分别对应右,上,下。
网友评论