layui carousel.html | 易学教程

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layui carousel</title>
    <style>
        /** {
            margin: 0;
            padding: 0;
        }*/

        .divText_img {
            width: 400px;
            height: 270px;
            background: rgba(0, 0, 0, 0.5);
            font: 20px '楷体';
            border: 1px dashed yellow;
            float: left;
        }

        .background_blue05 {
            background: rgba(91, 155, 213, 0.5);
        }

        .spanAttribute {
            text-align: justify;
            width: 99px;
        }

        .spanValue99 {
            text-align: center;
            width: 99px;
        }

        .width98 {
            width: 98px;
        }

        .spanValue298 {
            text-align: center;
            width: 298px;
        }

        .background_blue05 > span {
            float: left;
            line-height: 29px;
            height: 29px;
        }

        .height28line-height28 {
            line-height: 28px;
            height: 28px;
        }

        .borderLeftTop {
            border: 1px solid rgb(91, 155, 213);
            border-right: none;
            border-bottom: none;
        }

        .borderRight {
            border-right: 1px solid rgb(91, 155, 213);
        }

        .borderBottom {
            border-bottom: 1px solid rgb(91, 155, 213);
        }
    </style>
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <script src="lib/layui/layui.js"></script>
</head>
<body>
<div class="divText_img background_blue05">
    <span class="spanAttribute borderLeftTop">序号</span><span class="spanValue99 borderLeftTop">玛尼康</span><span
        class="spanAttribute borderLeftTop">建成年代</span><span
        class="spanValue99 width98 borderLeftTop borderRight" style="font-size:16px;">重修20年左右</span>
    <span class="spanAttribute borderLeftTop">面积</span><span class="spanValue99 borderLeftTop"> </span><span
        class="spanAttribute borderLeftTop">层数</span><span
        class="spanValue99 width98 borderLeftTop borderRight">1</span>
    <span class="spanAttribute borderLeftTop">基本形制</span><span class="spanValue99 borderLeftTop">庄廓院</span><span
        class="spanAttribute borderLeftTop">建造工艺</span><span
        class="spanValue99 width98 borderLeftTop borderRight">夯土</span>
    <span class="spanAttribute borderLeftTop">结构形式</span><span class="spanValue99 borderLeftTop">砖木构架</span><span
        class="spanAttribute borderLeftTop">主要材料</span><span
        class="spanValue99 width98 borderLeftTop borderRight" style="font-size:16px;">黄泥、木、砖</span>
    <span class="spanAttribute borderLeftTop">使用状况</span><span class="spanValue99 borderLeftTop">长期使用</span>
    <span class="spanAttribute borderLeftTop">保存状况</span><span
        class="spanValue99 width98 borderLeftTop borderRight">良好</span>
    <span class="spanAttribute borderLeftTop">装饰特点</span><span
        class="spanValue298 borderLeftTop borderRight" style="font-size:16px;">有白塔、雕饰、壁画、东却架子、佛像</span>
    <span class="spanAttribute borderLeftTop">历史功能</span><span class="spanValue298 borderLeftTop borderRight">宗教活动</span>
    <span class="spanAttribute borderLeftTop">产权归属</span><span class="spanValue298 borderLeftTop borderRight">塔加二村</span>
    <span class="spanAttribute borderLeftTop  borderBottom height28line-height28">备注</span>
    <span class="spanValue298 borderLeftTop borderRight borderBottom height28line-height28"> </span>
    <div style="clear:both;"></div>
</div>
<div class="divText_img">
    <div class="layui-carousel" id="tajiaBuildingQuery">
        <div carousel-item>
            <img src="./img/tajia/玛尼康二村/建筑顶视图.png" alt="">
            <img src="./img/tajia/玛尼康二村/建筑外部.png" alt="">
            <img src="./img/tajia/玛尼康二村/建筑内部.png" alt="">
            <img src="./img/tajia/玛尼康二村/建筑细节.png" alt="">
        </div>
    </div>
</div>
<div style="clear:both;"></div>
<script>
    layui.use('carousel', function () {
        let carousel = layui.carousel;
        carousel.render({
            elem: '#tajiaBuildingQuery',
            width: '100%', //设置容器宽度
            height: '100%',
            arrow: 'always', //始终显示箭头
        });
    });
    // viewer.mars.centerAt({y: 35.990979, x: 102.643485, z: 2798.57, heading: 20, pitch: -29.5, roll:0});
</script>
</body>
</html>
来源：CSDN
作者：学无止境慢慢来
链接：https://blog.csdn.net/weixin_42193179/article/details/103835585
标签
carousel