• 欢迎 游客 您的光临,下载之前请先阅读 积分规则(暂行) 。任何技术问题请在论坛提问,本站定制插件、模板主题售前、售后问题请联系QQ:5916171

技巧教程 给论坛加入Layui轮播!

UID
923
注册
2020/07/09
消息
72
反馈评分
8
黄金
1,675.5G
    OS X Chrome 84.0.4147.135
  • #1
第一次发教程 dalao别喷哈:icon-evil:
首先 新建一个头部小工具
Screenshot 2020-08-29_12-55-55-782.png
随便给他定义个key
选择在首页顶部
1598677048912.png
部署我们经典的Layui
可以食用cdn:
layui cdn接入:
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script type="text/javascript">
    layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element'], function() {
      var laydate = layui.laydate //日期
      ,laypage = layui.laypage //分页
      ,layer = layui.layer //弹层
      ,table = layui.table //表格
      ,carousel = layui.carousel //轮播
      ,upload = layui.upload //上传
      ,element = layui.element; //元素操作 等等...
    });
</script>
(复制就好啦
然后继续加入轮播框
HTML:
<div class="layui-carousel" id="lunbo">
  <div carousel-item>
    <div>轮播1</div>
    <div>轮播2</div>
  </div>
</div>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  carousel.render({
    elem: '#lunbo'
    ,width: '100%' //设置容器宽度
    ,arrow: 'always' //始终显示箭头
  });
});
</script>
<div>后面可以加html元素比如img等
然后 轮播框就完成啦

:icon-evil::icon-evil:
 
UID
923
注册
2020/07/09
消息
72
反馈评分
8
黄金
1,675.5G
    OS X Chrome 84.0.4147.135
  • #2
补上效果图(没设置100%

1598677846307.png
另外 图片建议设置宽高100%防止被拉伸:icon-razz:
-----------
加上100%以后
1598678128847.png
HTML:
width="100%" height="100%"
 

附件

  • 1598677718988.png
    1598677718988.png
    373.8 KB · 查看: 12

小关_

打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
489
反馈评分
1,408
黄金
6,841.1G
    Windows 10 Chrome 80.0.3987.149
  • #3
支持每一位创作者!
 
UID
1182
注册
2021/01/20
消息
11
反馈评分
2
黄金
0.0G
    Windows 10 Chrome 87.0.4280.141
  • #7
好棒!!!!!!!!!!
 
UID
790
注册
2020/04/28
消息
38
反馈评分
2
黄金
215.6G
    Windows 10 Chrome 88.0.4324.182
  • #9
大佬还有其他轮播图片的代码吗?
 

NSM

UID
1181
注册
2021/01/20
消息
1
反馈评分
0
黄金
1,002.0G
请问img标签怎么加呀,图片是上传至虚拟机吗。
 
UID
923
注册
2020/07/09
消息
72
反馈评分
8
黄金
1,675.5G
    Android 5.x Lollipop Chrome 81.0.4044.117
  • #11
请问img标签怎么加呀,图片是上传至虚拟机吗。
虚拟机啥东西(雾 图片你托管到图床比较好
 
顶部 底部