|
首页代码栏目加加上layui的 js和css
如下:
- <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
- <script type="text/javascript" src="js/jquery.js"></script>
- <script src="layui/layui.js"></script>
复制代码 模板代码部分:
- <div class="layui-carousel" id="banner">
- <div carousel-item="">
- <li><a href="/"><img src="图片地址" alt="" title="">
- </div>
- </div>
复制代码 script代码
- <script>
- layui.use(['carousel'], function () {
- var carousel = layui.carousel;
- carousel.render({
- elem: '#banner', width: '100%', height: '350px', interval: 5000
-
- });
- })
- </script>
复制代码 属性说明
elem 指向容器选择器,如:elem: '#id'。也可以是DOM对象 string/object 无
width 设定轮播容器宽度,支持像素和百分比
height 设定轮播容器高度,支持像素和百分比
full 是否全屏轮播 boolean false
anim 轮播切换动画方式,可选值为:
default(左右切换)
updown(上下切换)
fade(渐隐渐显切换)
autoplay 是否切换 boolean true
interval 切换的时间间隔,单位:ms(毫秒),不能低于800 number 3000
index 初始开始的条目索引 number 0
arrow 切换箭头默认显示状态,可选值为:
hover(悬停显示)
always(始终显示)
none(始终不显示)
indicator 指示器位置,可选值为:
inside(容器内部)
outside(容器外部)
none(不显示)
注意:如果设定了 anim:'updown',该参数将无效 string 'inside'
trigger 指示器的触发事件 string 'click'
|
上一篇:腾讯云轻量服务器ftp无法连接方法下一篇:宝塔面板使用`Navicat`或其他工具连接数据库
|