Maison > Article > interface Web > Comment utiliser LayUI pour implémenter des images de carrousel de pages Web

Comment utiliser LayUI pour implémenter des images de carrousel de pages Web

angryTomavant: 2020-03-21 15:18:546815parcourir

Cet article présente la méthode d'utilisation de LayUI pour implémenter des images de carrousel de pages Web. Il a une certaine valeur de référence. J'espère qu'il sera utile aux amis qui apprennent Layui ! Si vous souhaitez utiliser layui pour écrire une image de carrousel, vous devez d'abord télécharger le document layui. Téléchargez-le simplement sur votre ordinateur et enregistrez-le n'importe où.

Comment utiliser LayUI pour implémenter des images de carrousel de pages Web

Si vous souhaitez utiliser layui pour écrire des images de carrousel, vous devez pour télécharger layui d'abord Téléchargez simplement le document sur votre ordinateur et enregistrez-le n'importe où

Voici l'adresse de téléchargement : https://www.layui.com

Utilisez layui pour écrire des images de carrousel. L'avantage est qu'il y a moins de code

Vous n'avez fondamentalement pas besoin d'écrire des styles CSS, ce qui est très heureux

Après tout, nous sommes tous paresseux

Avant d'écrire du code , vous devez d'abord télécharger le package layui que vous venez de télécharger Importez-le :

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

Ensuite c'est simple, il suffit de mettre l'image directement :

<div class="layui-carousel" id="test1">
            <div carousel-item>
                <!--里面可以加图片，文字等-->
                <div><img  src="img/1.jpg" / alt="Comment utiliser LayUI pour implémenter des images de carrousel de pages Web" ></div>
                <div><img  src="img/2.jpg" / alt="Comment utiliser LayUI pour implémenter des images de carrousel de pages Web" ></div>
                <div><img  src="img/3.jpg" / alt="Comment utiliser LayUI pour implémenter des images de carrousel de pages Web" ></div>
                <div><img  src="img/4.jpg" / alt="Comment utiliser LayUI pour implémenter des images de carrousel de pages Web" ></div>
                <div><img  src="img/5.jpg" / alt="Comment utiliser LayUI pour implémenter des images de carrousel de pages Web" ></div>
            </div>
        </div>

Après avoir mis l'image, il est temps d'écrire le code 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>

Je vais le donner ci-dessous. Jetez quelques grandes photos :

Comment utiliser LayUI pour implémenter des images de carrousel de pages Web

D'accord, jouons avec

Pour plus de layui connaissances, veuillez faire attention à la colonne tutoriel d'utilisation de layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

css layui https

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Exemple d'utilisation du formulaire dans layuiArticle suivant：Exemple d'utilisation du formulaire dans layui

Articles Liés

Voir plus