内置模块之轮播
2020-04-26 本文已影响0人
小疏林er
1、基本使用
（1）导入layui.css文件和layui.js文件
<script type="text/javascript" src="layui/layui.js" ></script> <link rel="stylesheet" href="layui/css/layui.css" />（2）准备放轮播的容器（div）
轮播一般用来做主题展示、广告等等，所以一般都是放图片，其实放啥都行。
基本结构：<div class="layui-carousel"> <div carousel-item> <div>内容1（乐意放啥放啥，不一定非是图）</div> <div>内容2</div> </div> </div>用来做图片展示：
<div class="layui-carousel" id="test1" style="margin: 100px auto;"> <div carousel-item> <div><img src="img/cat/u=1015921460,3314662533&fm=26&gp=0.jpg" >></div> <div><img src="img/cat/u=172974422,4221423006&fm=26&gp=0.jpg" >></div> <div><img src="img/cat/u=2814869740,3580057194&fm=26&gp=0.jpg" >></div> <div><img src="img/cat/u=2934688879,752553222&fm=26&gp=0.jpg" >></div> <div><img src="img/cat/u=4249589349,2868519533&fm=26&gp=0.jpg" >></div> </div> </div>（3）加载模块（carousel）、实例化一个轮播（carousel.render( { } ) ）
加载模块和其他模块是一样的方法，实例化的时候elem属性一定要设置，并且对应着轮播容器div的id值（相当于绑定）。一些基本属性还有：高度（height）、宽度（width）、自动播放（autoplay）、动画方式（anim）、自动切换时间（interval）等等。
<script type="text/javascript"> layui.use('carousel',function(){ var carousel = layui.carousel; carousel.render({ elem: '#test1' //对应着轮播容器div的id名，他俩要一致 ,width: '500px' //设置容器宽度 ,height:'300px' ,arrow: 'always' //始终显示箭头 // ,autoplay: false //不自动播放 //,anim: 'updown' //切换动画方式 }); }) </script>
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="layui/layui.js" ></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
</style>
<script type="text/javascript">
layui.use('carousel',function(){
var carousel = layui.carousel;
//实例化轮播并配置参数
carousel.render({
elem: '#test1' //对应着轮播容器div的id名，他俩要一致
,width: '500px' //设置容器宽度
,height:'300px'
,arrow: 'always' //始终显示箭头
// ,autoplay: false //不自动播放
//,anim: 'updown' //切换动画方式
});
})
</script>
<body>
<div class="layui-carousel">
<div carousel-item>
<div>内容1（乐意放啥放啥，不一定非是图）</div>
<div>内容2</div>
</div>
</div>
<div class="layui-carousel" id="test1" style="margin: 100px auto;">
<div carousel-item>
<div><img src="img/cat/u=1015921460,3314662533&fm=26&gp=0.jpg" ></div>
<div><img src="img/cat/u=172974422,4221423006&fm=26&gp=0.jpg" ></div>
<div><img src="img/cat/u=2814869740,3580057194&fm=26&gp=0.jpg" ></div>
<div><img src="img/cat/u=2934688879,752553222&fm=26&gp=0.jpg" ></div>
<div><img src="img/cat/u=4249589349,2868519533&fm=26&gp=0.jpg" ></div>
</div>
</div>
</body>
</html>
结果图：
图片来源于网络。。。
image.png
2、常用参数
layui官方文档中提供了一个表，方便我们使用轮播。
image.png
以前写的一个小栗子也用到了轮播，可以参考一下使用。https://www.jianshu.com/p/44ccb532f5d1
