Comment utiliser LayUI pour implémenter des images de carrousel de pages Web-Tutoriel Layui-php.cn

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

angryTom

Libérer： 2020-03-21 15:18:54

avant

6923 Les gens l'ont consulté

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

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>

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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

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