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

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

博客作者:【qiang】

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

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

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

基础代码示例:

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

代码效果展示:

完整参数代码示例:

<区块 类名="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_轮播.配置.触发]: "@事件_点击",
});
</脚本>
Markup

代码效果演示:

 

特殊参数解释:

1、全屏:如果设置为真,那么轮播就是全屏的轮播;

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

3、间隔:切换时间间隔,单位毫秒;

4、索引:初始的轮播位置,从0开始;

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

 

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

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