022-轮播

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. 效果图

猜你喜欢