LayUI を使用して Web ページのカルーセル画像を実装する方法-ライユイのチュートリアル-php.cn

LayUI を使用して Web ページのカルーセル画像を実装する方法

angryTom

リリース： 2020-03-21 15:18:54

転載

6923 人が閲覧しました

この記事では、LayUI を使用して Web ページのカルーセルグラフィックを実装する方法を紹介します。一定の参考価値があるので、Layui を学習している友人の役に立てば幸いです。 layui を使用してカルーセル画像を書きたい場合は、まず、layui ドキュメントをダウンロードする必要があります。コンピュータにダウンロードして、任意の場所に保存するだけです。

LayUI を使用して Web ページのカルーセル画像を実装する方法

LayUI を使用して Web ページのカルーセル画像を実装する方法

LayUI を使用してカルーセル画像を作成する場合は、次のものが必要です。まず、layui をダウンロードしますドキュメントをコンピュータにダウンロードして、任意の場所に保存するだけです。

ダウンロードアドレスは次のとおりです: https://www.layui.com

layui を使用してカルーセル画像を作成利点は、コードが少ないことです。

基本的に CSS スタイルを記述する必要がなく、これは非常に嬉しいことです。

結局のところ、私たちは皆怠け者です。

コードを書く前に、まず、先ほどダウンロードしたlayuiパッケージをダウンロードする必要があります。インポートしてください:

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

ログイン後にコピー

それから、画像を直接配置するだけなので簡単です:

<div class="layui-carousel" id="test1">
            <div carousel-item>
                <!--里面可以加图片，文字等-->
                <div><img  src="img/1.jpg" / alt="LayUI を使用して Web ページのカルーセル画像を実装する方法" ></div>
                <div><img  src="img/2.jpg" / alt="LayUI を使用して Web ページのカルーセル画像を実装する方法" ></div>
                <div><img  src="img/3.jpg" / alt="LayUI を使用して Web ページのカルーセル画像を実装する方法" ></div>
                <div><img  src="img/4.jpg" / alt="LayUI を使用して Web ページのカルーセル画像を実装する方法" ></div>
                <div><img  src="img/5.jpg" / alt="LayUI を使用して Web ページのカルーセル画像を実装する方法" ></div>
            </div>
        </div>

ログイン後にコピー

画像を配置した後、layuiコードを記述します:

<script type="text/javascript" src="layui/layui.js"></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 を使用して Web ページのカルーセル画像を実装する方法