青岛网站建设-中国互联百度app客服人工在线咨询

学习要点：
1.轮播模块
本节课我们来开始了解 Layui 的内置模块：轮播模块。
一．轮播模块
1. 轮播模块，即跑马灯等轮播交互场景，先来看下基本设置；
<div id="test" class="layui-carousel">
<div carousel-item>
<div>轮播图 1</div>
<div>轮播图 2</div>
<div>轮播图 3</div>
<div>轮播图 4</div>
<div>轮播图 5</div>
</div>
</div>
layui.use(['carousel'], () => {
const carousel = layui.carousel
//实例化
carousel.render({
//绑定 dom
elem : '#test',
//长度 100%
width : '100%',
//始终显示箭头
arrow : 'always',
//切换动画方式
anim : 'default'
})
})
2. 对于参数，下面列出比较常用的属性，更多参考手册：
属性 描述
elem 容器选择器，DOM 对象
width 长度
height 高度
full 是否全屏
anmi 动画方式：default、updown、fade
autoplay 是否自动切换，默认 true
interval 间隔时间，不低于 800，默认 3000
index 初始索引，默认 0
arrow 切换箭头显示状态：hover、always
indicator 指定容器：inside、outside、none
trigger 触发事件，默认 click
3. 事件切换：
//触发
carousel.on('change(test)', (obj) => {
console.log(obj)
})