使用layui框架写轮播图

本文详细介绍了如何使用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官方文档提供的书写方法

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值