本文摘自PHP中文网,作者angryTom,侵删。
本篇文章介绍了使用LayUI实现网页轮播图的方法,具有一定的参考价值,希望对学习Layui的朋友有帮助!想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行。如何使用LayUI实现网页轮播图
想要用layui写出来轮播图,需要先下载layui的文档,下载到电脑上就可以了,随便保存到那个地方就行,
这里是下载地址:https://www.layui.com
用layui写轮播图的好处就是代码少
基本不用写css的样式,这是很开心的
毕竟我们都很懒
写代码前先要把刚才下载的layui包引进去:
1 2 3 4 5 6 7 | <head>
<meta charset= "utf-8" >
<title>轮播图</title>
<link rel= "stylesheet" href= "layui/css/modules/layer/default/layer.css" />
<link rel= "stylesheet" href= "layui/css/layui.css" />
<script type= "text/javascript" ></script>
</head>
|
然后就简单了,直接放图片就行了:
1 2 3 4 5 6 7 8 9 10 | <div class = "layui-carousel" id= "test1" >
<div carousel-item>
<!--里面可以加图片,文字等-->
<div><img src= "img/1.jpg" /></div>
<div><img src= "img/2.jpg" /></div>
<div><img src= "img/3.jpg" /></div>
<div><img src= "img/4.jpg" /></div>
<div><img src= "img/5.jpg" /></div>
</div>
</div>
|
放完图片,就该写layui的代码了:
阅读剩余部分
相关阅读 >>
layui是基于vue的吗?
layui怎么使用jquery
基于layui的步骤条面板(附代码)
layui怎么做图片在列表中显示
layui怎么弹出form
layui的文件上传功能怎么获取文件名
layui框架的好处
layui判断表单是否为空
layui自定义字体图标图文教程
layui是什么?有什么作用?
更多相关阅读请进入《layui》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者
转载请注明出处:木庄网络博客 » 如何使用LayUI实现网页轮播图