ホームページ > 記事 > ウェブフロントエンド > LayUI を使用して Web ページのカルーセル画像を実装する方法
この記事では、LayUI を使用して Web ページのカルーセル グラフィックを実装する方法を紹介します。一定の参考価値があるので、Layui を学習している友人の役に立てば幸いです。 layui を使用してカルーセル画像を書きたい場合は、まず、layui ドキュメントをダウンロードする必要があります。コンピュータにダウンロードして、任意の場所に保存するだけです。
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('carousel', function() { var carousel = layui.carousel; //建造实例化 carousel.render({ elem: '#test1', width: '100%', //设置背景容器的宽度 arrow: 'always', //始终显示箭头,不会消失 //anim: 'updown' //切换动画方式:anim //indicator:'outside', indicator: 'outside' //这个属性:小圆点在外面 }); }); </script>
下に大きな写真をいくつか載せておきます:
わかりました、遊んでみましょう
Lauiui の知識について詳しくはlayui使い方チュートリアル列に注目してください。
以上がLayUI を使用して Web ページのカルーセル画像を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。