layui学习笔记10--carousel

最新推荐文章于 2024-04-04 15:36:26 发布

yangtz_1999

最新推荐文章于 2024-04-04 15:36:26 发布

阅读量3.5k

点赞数

文章标签： layui 轮播

本文链接：https://blog.csdn.net/Young_Fee/article/details/79480267

版权

carousel

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>carousel模块快速使用</title>
  <link rel="stylesheet" href="E:/layui/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-carousel" id="test1">
  <div carousel-item>
    <div><img src = "C:/Users/Young/Pictures/Saved Pictures/1.3/1.jpg"  height = 100%  width = 100%></img></div>
    <div><img src = "C:/Users/Young/Pictures/Saved Pictures/1.3/2.jpg"  height = 100%  width = 100%></img></div>
    <div><img src = "C:/Users/Young/Pictures/Saved Pictures/1.3/3.jpg"  height = 100%  width = 100%></img></div>
    <div><img src = "C:/Users/Young/Pictures/Saved Pictures/1.3/4.jpg"  height = 100%  width = 100%></img></div>
    <div><h2>over</h2></div>
  </div>
</div>
<!-- 条目中可以是任意内容，如：<img src=""> -->

<script src="E:/layui/layui/layui.js"></script>
<script>
layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '50%' //设置容器宽度
    ,height:'500px'
    ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
  });
});
</script>
</body>
</html>