022-轮播

最新推荐文章于 2025-09-24 11:52:15 发布

原创最新推荐文章于 2025-09-24 11:52:15 发布 · 299 阅读

1 ·

CC 4.0 BY-SA版权

layui学习专栏收录该内容

32 篇文章

订阅专栏

本文详细介绍了 layui 轮播组件的使用方法，包括基础参数设置、指示器位置、切换事件监听、轮播重置等关键功能，并提供了具体的 HTML 和 JavaScript 代码示例，展示了如何实现轮播图片的自动切换、动画效果和事件监听。

1. 模块加载名称: carousel。

2. 基础参数选项

2.1. 通过核心方法: carousel.render(options)来对轮播设置基础参数。也可以通过方法: carousel.set(options)来设定全局基础参数。

3. 指示器位置

3.1. 外层元素的class="layui-carousel"用来标识为一个轮播容器。

3.2. 内层元素的属性carousel-item用来标识条目。

4. 切换事件

4.1. 轮播的每一次切换时触发, 回调函数返回一个object参数, 携带的成员如下:

var carousel = layui.carousel;

// 监听轮播切换事件
carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
	console.log(obj.index); // 当前条目的索引
	console.log(obj.prevIndex); // 上一个条目的索引
	console.log(obj.item); // 当前条目的元素对象
});

5. 重置轮播

5.1. 事实上, 在执行carousel.render(options)方法时, 有返回一个当前实例的对象。该对象包含了用于操作当前轮播的一些属性和方法。

var ins = carousel.render(options);
 
// 重置轮播
ins.reload(options);

6. 例子

6.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>轮播组件 - layui</title>

		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" type="text/javascript" src="layui/layui.js"></script>
	</head>
	<body>
		<div class="layui-carousel" id="test1" lay-filter="test1">
	  		<div carousel-item>
			    <img src="bg1.png" alt="" />
			    <img src="bg2.png" alt="" />
			    <img src="bg3.png" alt="" />
	  		</div>
		</div>

		<script type="text/javascript">
			layui.use(['carousel'], function(){
  				var carousel = layui.carousel;

		  		// 建造实例
		  		var ins = carousel.render({
				    elem: '#test1' // 指向容器选择器
				    ,width: '850px' // 设定轮播容器宽度
				    ,height: '320px' // 设定轮播容器高度
				    , arrow: 'always' // 切换箭头默认显示状态
				    // ,full: true // 是否全屏轮播
				    ,anim: 'default' // 轮播切换动画方式
				    ,autoplay: true // 是否自动切换
				    ,interval: 2000 // 自动切换的时间间隔
				    ,index: 1 // 初始开始的条目索引
				    ,indicator: 'inside' // 指示器位置
		  		});

		  		// 监听轮播切换事件
				carousel.on('change(test1)', function(obj){ // test1来源于对应html容器的lay-filter="test1"属性值
			  		console.log(obj.index); // 当前条目的索引
			  		console.log(obj.prevIndex); // 上一个条目的索引
			  		console.log(obj.item); // 当前条目的元素对象
				});  
			});
		</script>
	</body>
</html>

6.2. 效果图