집 > 기사 > 웹 프론트엔드 > LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법

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

angryTom앞으로: 2020-03-21 15:18:546865검색

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="img/1.jpg" / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="img/2.jpg" / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="img/3.jpg" / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="img/4.jpg" / alt="LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법" ></div>
                <div><img  src="img/5.jpg" / 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에 대한 더 많은 지식을 알고 싶다면

layui 사용법 튜토리얼

칼럼을 주목해주세요 .

위 내용은 LayUI를 사용하여 웹 페이지 캐러셀 이미지를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

css layui https

성명：

이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제

이전 기사：Layui에서 Form을 사용하는 예다음 기사：Layui에서 Form을 사용하는 예