layui 轮播

最新推荐文章于 2023-03-30 17:51:32 发布

原创最新推荐文章于 2023-03-30 17:51:32 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

13 篇文章

订阅专栏

layui

2 篇文章

订阅专栏

博客介绍了Layui的使用准备步骤，首先从官网https://www.layui.com/下载Layui并解压，将layui文件夹单独拿出，然后进行引用。这些步骤是使用Layui进行前端开发的基础操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>