LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법-레이이 튜토리얼-php.cn

집

웹 프론트엔드

레이이 튜토리얼

LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법

angryTom

Mar 21, 2020 pm 03:18 PM

layui회전목마

LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법을 소개하는 글입니다. Layui를 배우는 친구들에게 도움이 되었으면 좋겠습니다. Layui를 사용하여 캐러셀 이미지를 작성하려면 먼저 Layui 문서를 다운로드해야 합니다. 컴퓨터에 다운로드하여 어디에나 저장하면 됩니다.

LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법

LayUI를 사용하여 웹페이지 캐러셀 구현하는 방법

쓰고싶다 withlayui 캐러셀 사진을 보려면 먼저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="/static/imghwm/default1.png"  data-src="img/1.jpg"  class="lazy"   / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="/static/imghwm/default1.png"  data-src="img/2.jpg"  class="lazy"   / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="/static/imghwm/default1.png"  data-src="img/3.jpg"  class="lazy"   / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="/static/imghwm/default1.png"  data-src="img/4.jpg"  class="lazy"   / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="/static/imghwm/default1.png"  data-src="img/5.jpg"  class="lazy"   / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
            </div>
        </div>

#🎜🎜 #사진을 게시한 후, 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>

다음은 몇 가지 큰 사진입니다:

#🎜 🎜#

좋아, 놀아보자

LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법 layui에 대한 더 많은 지식을 알고 싶다면