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

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

UID
923
注册
2020/07/09
消息
72
点数
8
黄金
1,238.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,238.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 · 查看: 30

小关

打酱油的路过~~
管理成员
UID
255
注册
2019/01/25
消息
489
点数
93
黄金
11,744.5G
    Windows 10 Chrome 80.0.3987.149
  • #3
支持每一位创作者!
 
UID
790
注册
2020/04/28
消息
62
点数
8
黄金
2,174.4G
    Windows 10 Chrome 88.0.4324.182
  • #9
大佬还有其他轮播图片的代码吗?
 

NSM

UID
1181
注册
2021/01/20
消息
1
点数
1
黄金
965.0G
请问img标签怎么加呀,图片是上传至虚拟机吗。
 
UID
923
注册
2020/07/09
消息
72
点数
8
黄金
1,238.5G
    Android 5.x Lollipop Chrome 81.0.4044.117
  • #11
请问img标签怎么加呀,图片是上传至虚拟机吗。
虚拟机啥东西(雾 图片你托管到图床比较好
 
UID
1032
注册
2020/10/04
消息
69
点数
8
黄金
2,604.0G
    Windows 10 Chrome 102.0.5005.63
  • #15
我建议做个手机端自适应,网上自适应不行,长方形16:9图片在手机上少一半很难看
 
UID
888
注册
2020/06/25
消息
3
点数
3
黄金
488.0G
    Windows 10 Chrome 103.0.5060.114
  • #16
感谢大佬!
 
UID
1865
注册
2022/08/02
消息
1
点数
1
黄金
526.0G
    Windows 10 Chrome 104.0.5112.81    美国 网友  
  • #17
这个CSS好像会影响论坛字体颜色
 
UID
33
注册
2017/11/12
消息
59
点数
18
黄金
13,897.8G
    OS X Chrome 103.0.5060.134    俄罗斯 网友  
  • #18
顶部 底部