init

2024-10-29 14:04:59 +08:00
commit 48bf3e6f33
2839 changed files with 762707 additions and 0 deletions
--- a/public/frontend/layui-main/examples/carousel.html
+++ b/public/frontend/layui-main/examples/carousel.html
@@ -0,0 +1,123 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<title>轮播组件 - layui</title>
+
+<link rel="stylesheet" href="../src/css/layui.css">
+
+<style>
+body{padding: 20px;}
+
+/* 为了区分效果 */
+div[carousel-item]>*{text-align: center; line-height: 280px; color: #fff;}
+div[carousel-item]>*:nth-child(2n){background-color: #009688;}
+div[carousel-item]>*:nth-child(2n+1){background-color: #5FB878;}
+
+#test2 div[carousel-item]>*{line-height: 120px;}
+</style>
+</head>
+<body>
+
+
+<div class="layui-carousel" id="test1" lay-filter="test1">
+  <div carousel-item>
+    <div>条目1</div>
+    <div>条目2</div>
+    <div>条目3</div>
+    <div>条目4</div>
+  </div>
+</div>
+
+<br>
+
+<div class="layui-carousel" id="test2">
+  <div carousel-item>
+    <div>条目1</div>
+    <div>条目2</div>
+  </div>
+</div>
+
+<br>
+
+<div class="layui-carousel" id="test3">
+  <div carousel-item>
+    <div>条目1</div>
+    <div>条目2</div>
+    <div>条目3</div>
+    <div>条目4</div>
+  </div>
+</div>
+
+<br>
+
+<div class="layui-carousel" id="test4">
+  <div carousel-item>
+    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-1.jpg"></div>
+    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-2.jpg"></div>
+    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-3.jpg"></div>
+    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-4.jpg"></div>
+    <div><img src="https://unpkg.com/outeres/demo/carousel/720x360-5.jpg"></div>
+  </div>
+</div>
+
+
+<script src="../src/layui.js"></script>
+<script>
+layui.use('carousel', function(){
+  var carousel = layui.carousel;
+  
+  //建造实例
+  carousel.render({
+    elem: '#test1'
+    ,index: 2
+    //,full: true
+    ,arrow: 'always'
+    ,autoplay: 'always'
+    ,change: function(obj){
+      console.log(obj)
+    }
+    //,interval: 5000
+    //,autoplay: false
+    //,indicator: 'outside'
+    //,trigger: 'hover'
+  });
+  
+  //事件
+  /*
+  carousel.on('change(test1)', function(obj){
+    console.log(obj)
+  });
+  */
+
+  carousel.render({
+    elem: '#test2'
+    ,interval: 1800
+    //,full: true
+    ,anim: 'fade'
+    ,height: '120px'
+  });
+  
+  carousel.render({
+    elem: '#test3'
+    //,full: true
+    ,arrow: 'always'
+    //,autoplay: false
+    //,indicator: 'outside'
+    //,trigger: 'hover'
+    ,anim: 'updown'
+    //,full: true
+  });
+  
+  // 图片轮播
+  carousel.render({
+    elem: '#test4'
+    ,width: '720px'
+    ,height: '360px'
+    ,interval: 5000
+  });
+});
+</script>
+</body>
+</html>