当前博客：43-快码FOF中文编程layui教学-组件：轮播

188 次浏览【转载需注明来源】

收藏内容 (0) (0)

个性签名：请输入个性签名___________

几乎每个网站都有一个轮播，推荐重要的产品，内容，推广等。

而layui也内置了轮播组件，虽然可能不如专业的轮播组件，但是基础的轮播绝对是够用了。

基础代码示例：

<区块 类名="lay-轮播" id="演示1">
	<区块 轮播项目>
		<区块>条目1</区块>
		<区块>条目2</区块>
		<区块>条目3</区块>
		<区块>条目4</区块>
		<区块>条目5</区块>
	</区块>
</区块>
<脚本>
    新建对象 lay_轮播({
    	[lay_轮播.配置.绑定元素]: "#演示1",
    	[lay_轮播.配置.宽度]: "100%", //设置容器宽度
    	[lay_轮播.配置.箭头]: lay_轮播.箭头.始终显示, //始终显示箭头
    });
</脚本>

代码效果展示：

完整参数代码示例：

<区块 类名="lay-轮播" id="演示2">
	<区块 轮播项目>
		<区块>条目1</区块>
		<区块>条目2</区块>
		<区块>条目3</区块>
		<区块>条目4</区块>
		<区块>条目5</区块>
	</区块>
</区块>
<脚本>
新建对象 lay_轮播({
	[lay_轮播.配置.绑定元素]: "#演示2",
	[lay_轮播.配置.宽度]: "100%", //设置容器宽度
	[lay_轮播.配置.高度]: "220px",
	[lay_轮播.配置.全屏]: 假,
	[lay_轮播.配置.动画]: lay_轮播.动画.左右切换,
	[lay_轮播.配置.自动切换]: 真,
	[lay_轮播.配置.间隔]: 4000,
	[lay_轮播.配置.索引]: 1,
	[lay_轮播.配置.指示器]: lay_轮播.指示器.容器外部,
	[lay_轮播.配置.箭头]: lay_轮播.箭头.始终显示,
	[lay_轮播.配置.触发]: "@事件_点击",
});
</脚本>

代码效果演示：

特殊参数解释:

1、全屏：如果设置为真，那么轮播就是全屏的轮播；

2、动画：设置轮播的切换效果，左右，上下滚动。

3、间隔：切换时间间隔，单位毫秒；

4、索引：初始的轮播位置，从0开始；

5、触发：指示器圆点的触发，一般是点击或者鼠标移入。

点击此处跳转案例下载：点击下载轮播实例

评论信息

默认排序 

当前博客：43-快码FOF中文编程layui教学-组件：轮播

测试账号

热门博客

最新博客

43-快码FOF中文编程layui教学-组件：轮播