LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖的幾種方法

發(fā)布時(shí)間：2020-03-23 17:35:49 來(lái)源：億速云閱讀：4042 作者：小新欄目：web開(kāi)發(fā)

本篇文章介紹了LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖的幾種方法，具有一定的參考價(jià)值，希望對(duì)學(xué)習(xí)Layui的朋友有幫助！想要用layui寫出來(lái)輪播圖，需要先下載layui的文檔，下載到電腦上就可以了，隨便保存到那個(gè)地方就行。

如何使用LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖

想要用layui寫出來(lái)輪播圖，需要先下載layui的文檔，下載到電腦上就可以了，隨便保存到那個(gè)地方就行，

這里是下載地址：https://www.layui.com

用layui寫輪播圖的好處就是代碼少

基本不用寫css的樣式，這是很開(kāi)心的

畢竟我們都很懶

寫代碼前先要把剛才下載的layui包引進(jìn)去：

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

然后就簡(jiǎn)單了，直接放圖片就行了：

<div class="layui-carousel" id="test1">
            <div carousel-item>
                <!--里面可以加圖片，文字等-->
                <div><img src="img/1.jpg" /></div>
                <div><img src="img/2.jpg" /></div>
                <div><img src="img/3.jpg" /></div>
                <div><img src="img/4.jpg" /></div>
                <div><img src="img/5.jpg" /></div>
            </div>
        </div>

放完圖片，就該寫layui的代碼了：

<script type="text/javascript" src="layui/layui.js"></script>
        <script>
            //第一個(gè)輪播圖
            layui.use('carousel', function() {
                var carousel = layui.carousel;
                //建造實(shí)例化
                carousel.render({
                    elem: '#test1',
                    width: '100%', //設(shè)置背景容器的寬度
                    arrow: 'always', //始終顯示箭頭,不會(huì)消失
                    //anim: 'updown' //切換動(dòng)畫方式:anim
                     //indicator:'outside',
                        indicator: 'outside'    //這個(gè)屬性：小圓點(diǎn)在外面   
                });
            });
            </script>

下面再給拋出幾張大圖：

LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖的幾種方法

好了，拿去玩吧

更多相關(guān)知識(shí)點(diǎn)文章：

layui輪播圖根據(jù)圖片自適應(yīng)的實(shí)現(xiàn)方法

使用layui框架寫輪播圖的案例分析

以上就是LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖的幾種方法的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果如果想了解更多，歡迎來(lái)億速云行業(yè)資訊！

向AI問(wèn)一下細(xì)節(jié)

LayUI實(shí)現(xiàn)網(wǎng)頁(yè)輪播圖的幾種方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽