如何使用LayUI实现网页轮播图

百变鹏仔 1个月前 (11-16) #layui

文章标签如何使用

本篇文章介绍了使用layui实现网页轮播图的方法，具有一定的参考价值，希望对学习layui的朋友有帮助！想要用layui写出来轮播图，需要先下载layui的文档，下载到电脑上就可以了，随便保存到那个地方就行。

如何使用LayUI实现网页轮播图

想要用layui写出来轮播图，需要先下载layui的文档，下载到电脑上就可以了，随便保存到那个地方就行，

这里是下载地址：https://www.layui.com

用layui写轮播图的好处就是代码少

基本不用写css的样式，这是很开心的

毕竟我们都很懒

写代码前先要把刚才下载的layui包引进去：

        <meta>        <title>轮播图</title>        <link>        <link>        <script></script>

然后就简单了，直接放图片就行了：

<div>            <div>                <!--里面可以加图片，文字等-->                <div>@@##@@</div>                <div>@@##@@</div>                <div>@@##@@</div>                <div>@@##@@</div>                <div>@@##@@</div>            </div>        </div>

放完图片，就该写layui的代码了：

<script></script>        <script>            //第一个轮播图            layui.use(&#39;carousel&#39;, function() {                var carousel = layui.carousel;                //建造实例化                carousel.render({                    elem: &#39;#test1&#39;,                    width: &#39;100%&#39;, //设置背景容器的宽度                    arrow: &#39;always&#39;, //始终显示箭头,不会消失                    //anim: &#39;updown&#39; //切换动画方式:anim                     //indicator:&#39;outside&#39;,                        indicator: &#39;outside&#39;    //这个属性：小圆点在外面                   });            });            </script>

下面再给抛出几张大图：

好了，拿去玩吧

更多layui知识请关注layui使用教程栏目。

文章推荐

如何使用LayUI实现网页轮播图

layui的分页怎么用

layui怎么设置checkbox勾选

layui怎么对弹出层显示数据

layui表格怎么清空

layui有什么主要功能