ホームページ >ウェブフロントエンド >ライユイのチュートリアル >LayUI を使用して Web ページのカルーセル画像を実装する方法
LayUI を使用して Web ページのカルーセル画像を実装する方法
- angryTom転載
- 2020-03-21 15:18:546927ブラウズ
この記事では、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 サイトの他の関連記事を参照してください。