Heim > Artikel > Web-Frontend > So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern
So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern
- angryTomnach vorne
- 2020-03-21 15:18:546894Durchsuche
Dieser Artikel stellt die Methode zur Verwendung von LayUI zum Implementieren von Webseiten-Karussellbildern vor. Ich hoffe, dass er für Freunde, die Layui lernen, hilfreich sein wird. Wenn Sie Laui zum Schreiben eines Karussellbilds verwenden möchten, müssen Sie zuerst das Laui-Dokument herunterladen. Laden Sie es einfach auf Ihren Computer herunter und speichern Sie es an einem beliebigen Ort.
So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern
Wenn Sie Layui zum Schreiben von Karussellbildern verwenden möchten, benötigen Sie Folgendes Um zuerst Laui herunterzuladen, laden Sie einfach das Dokument auf Ihren Computer herunter und speichern Sie es irgendwo.
Hier ist die Download-Adresse: https://www.layui.com
Verwenden Sie Laui, um Karussellbilder zu schreiben Der Vorteil ist, dass weniger Code vorhanden ist
Im Grunde müssen Sie keine CSS-Stile schreiben, was sehr erfreulich ist
Schließlich sind wir alle faul
Bevor wir Code schreiben , Sie müssen zuerst das Laui-Paket herunterladen, das Sie gerade heruntergeladen haben. Importieren Sie es:
<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>Dann ist es ganz einfach, fügen Sie einfach das Bild direkt ein:
<div class="layui-carousel" id="test1">
<div carousel-item>
<!--里面可以加图片，文字等-->
<div><img src="img/1.jpg" / alt="So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern" ></div>
<div><img src="img/2.jpg" / alt="So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern" ></div>
<div><img src="img/3.jpg" / alt="So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern" ></div>
<div><img src="img/4.jpg" / alt="So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern" ></div>
<div><img src="img/5.jpg" / alt="So verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern" ></div>
</div>
</div>Nachdem Sie das Bild eingefügt haben, ist es Zeit, den Laui-Code zu schreiben :
<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>Ich werde es unten geben. Wirf ein paar große Bilder raus:
Okay, lass uns damit spielen
Für mehr Laui Wenn Sie über Kenntnisse verfügen, beachten Sie bitte die Spalte Tutorial zur Verwendung von Lauii.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie LayUI zum Implementieren von Webseiten-Karussellbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!