使用layui框架写轮播图

最新推荐文章于 2023-07-12 19:42:15 发布

原创最新推荐文章于 2023-07-12 19:42:15 发布 · 9k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#使用layui框架实现轮播

JS 同时被 2 个专栏收录

5 篇文章

订阅专栏

CSS

3 篇文章

订阅专栏

本文详细介绍了如何使用layui框架创建轮播图效果，包括下载插件、引入文件、编写HTML结构及JS代码实现轮播图的步骤。适用于前端开发者快速上手layui轮播功能。

使用layui框架写轮播图
在layui官网下载插件 https://www.layui.com/

文件中引入插件

<link rel="stylesheet" href="../js/plugins/layui-v2.5.4/layui/css/layui.css">
<script src="../js/plugins/layui-v2.5.4/layui/layui.js"></script>

HTML

<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>

js代码

<script>

    layui.use('carousel', function () {
        var carousel = layui.carousel;
        //建造实例
        carousel.render({
            elem: '#test1'
            , width: '500px' //设置容器宽度
            , height: '200px' //设置容器高度
            // , full:'true' //是否全屏轮播,默认false
            // , arrow: 'always' //始终显示箭头和点击按钮
            // ,anim: 'updown' //切换动画方式，可从各个方向滚动
        });
    });

</script>

其中js书写规范,严格按照layui官方文档提供的书写方法

在这里插入图片描述