《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：
1.30 轮播组件carousel
carousel主要适用于跑马灯/轮播等交互场景。
模块加载名称：carousel。
1.30.1 快速使用
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
width: '100%', //设置容器宽度
arrow: 'always' //始终显示箭头
//,anim: 'updown' //切换动画方式
});
</script>
</body>
</html>
运行效果如图1-xx所示。
在HTML结构中，只需要简单地注意这两项：
（1）外层元素的class="layui-carousel"用来标识为一个轮播容器
（2）内层元素的属性carousel-item用来标识条目
而id则用于carousel模块建造实例的元素指向，剩下的工作，就是按照实际需求给方法设置不同的基础参数了。
1.30.2 基础参数
通过核心方法：
carousel.render(options);
来对轮播设置基础参数，也可以通过方法：
carousel.set(options);
来设定全局基础参数。
支持的基础参数如图1-xx所示。
1.30.3 属性width和height
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
width: '500px',
height: "500px"
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.30.4 属性full
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
full: true
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.30.5 属性anim
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
//anim: "updown" //上下切换
//anim: "fade" //渐隐渐显切换
anim: "default" //default（ 左右切换）
});
</script>
</body>
</html>
1.30.6 属性autoplay
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
autoplay: false
});
</script>
</body>
</html>
1.30.7 属性interval
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
interval: 1000
});
</script>
</body>
</html>
1.30.8 属性index
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
index: 3
});
</script>
</body>
</html>
运行效果如图1-xx所示。
1.30.9 属性arrow
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
//arrow: "hover" //悬停显示
//arrow: "always" //始终显示
arrow: "none" //始终不显示
});
</script>
</body>
</html>
1.30.10 属性indicator
注意：如果设定了anim:'updown'，该参数将无效。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
//indicator: "inside" //容器内部
//indicator: "outside" //容器外部
indicator: "none" //不显示
});
</script>
</body>
</html>
1.30.11 属性trigger
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
trigger: "mouseover"
});
</script>
</body>
</html>
1.30.12 切换事件
轮播的每一次切换时触发，回调函数返回一个object参数。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="mycarousel">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1',
});
//监听轮播切换事件
carousel.on('change(mycarousel)', function(obj) { //test1来源于对应HTML容器的 lay-filter="test1" 属性值
console.log(obj.index); //当前条目的索引
console.log(obj.prevIndex); //上一个条目的索引
console.log(obj.item); //当前条目的元素对象
});
</script>
</body>
</html>
1.30.13 重载方法
事实上，在执行carousel.render(options)方法时，有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法，示例代码如图1-xx所示。
测试代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery3.5.1.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
<script src="layui/layui.all.js"></script>
</head>
<body>
<div class="layui-carousel" id="test1" lay-filter="mycarousel">
<div carousel-item>
<div>条目1</div>
<div>条目2</div>
<div>条目3</div>
<div>条目4</div>
<div>条目5</div>
</div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->
<script>
var carousel = layui.carousel;
//建造实例
var mycarousel = carousel.render({
elem: '#test1',
});
$(document).ready(function() {
setTimeout(function() {
mycarousel.reload({
interval: 1000,
});
}, 5000);
});
</script>
</body>
</html>
扫一扫
512
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
