用layui框架做一個輪播

1、用layui佈局，那麼我們得先對他進行引入,在這裏我們用到carousel模塊 所以引入“<script src="~/Plugins/layui/layui.js"></script>” 和

“ <link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />”

2/寫好body

<div class="layui-carousel" id="test1">
            <div carousel-item>
                <div>
                    <img src="~/Content/images/輪播1.jpg" /></div>
                <div>
                    <img src="~/Content/images/輪播2.jpg" /></div>
                <div>
                    <img src="~/Content/images/輪播3.jpg" /></div>
                <div>
                    <img src="~/Content/images/輪播1.jpg" /></div>
                <div>
                    <img src="~/Content/images/輪播2.jpg" /></div>
            </div>
        </div>

3、

<script>
   
        layui.use('carousel', function(){
             var carousel = layui.carousel;
                 //建造實例
                 carousel.render({
                 elem: '#test1'
                 ,width: '70%' //設置容器寬度的百分比
                 ,arrow: 'always' //始終顯示箭頭和點擊按鈕
               //,anim: 'updown' //切換動畫方式，可從各個方向滾動
             });
          });
</script>

那麼，一個完整的輪播就完成了

下兩圖是” anim ” 切換動畫方式改變的不同效果