layui 轮播

    xiaoxiao2023-11-07  120

    1.下载layui https://www.layui.com/,解压,把layui文件夹单独拿出来。

    2.引用layui

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>carousel模块快速使用</title> <link rel="stylesheet" href="../../layui/css/layui.css" media="all"> //根据自己的路径修改 <script src="../../layui/layui.js"></script> //自己的路径 </head> <body> <div class="layui-carousel" id="test1"> <div carousel-item> <div><img src="../images/1.jpg" alt="" style="width:100%;"></div> <div><img src="../images/ti.jpg" alt="" style="width:100%;"></div> <div><img src="../images/timg.jpg" alt="" style="width:100%;height:100%;"></div> <div><img src="../images/ti.jpg" alt="" style="width:100%;"></div> <div><img src="../images/ti.jpg" alt="" style="width:100%;"></div> </div> </div> <!-- 条目中可以是任意内容,如:<img src=""> --> <script> layui.use('carousel', function(){ //carousel轮播模块加载。 var carousel = layui.carousel; //建造实例 carousel.render({ elem: '#test1' ,width: '100%' //设置容器宽度 ,arrow: 'always' //始终显示箭头 ,anim: 'fade' //切换动画方式 }); }); </script> </body> </html>

     

    最新回复(0)