fullstack-star · gyj1278 · Jun 11, 2019 · Jun 11, 2019 · Jun 11, 2019 · Jun 11, 2019
diff --git a/css/fancybox.css b/css/fancybox.css
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,4 @@
+.swiper-container {
+  width: 1358px;
+  height: 849px;
+}
diff --git a/css/swiper.min.css b/css/swiper.min.css
diff --git a/imgs/01.jpg b/imgs/01.jpg
diff --git a/imgs/02.jpg b/imgs/02.jpg
diff --git a/imgs/03.jpg b/imgs/03.jpg
diff --git a/imgs/04.jpg b/imgs/04.jpg
diff --git a/index.html b/index.html
@@ -1,6 +1,32 @@
-<div id="marquee">
-  <img>
-  <img>
-  <img>
-</div>
-<script src="./libs/jquery.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <title>幻灯片轮播</title>
+
+  <link rel="stylesheet" href="css/swiper.min.css">
+  <link rel="stylesheet" href="css/fancybox.css">
+  <link rel="stylesheet" href="css/style.css">
+
+</head>
+
+<body>
+  <div class="swiper-container">
+    <div class="swiper-wrapper">
+      <div class="swiper-slide"><a data-fancybox href="./imgs/01.jpg"><img src="./imgs/01.jpg"></a></div>
+      <div class="swiper-slide"><a data-fancybox href="./imgs/02.jpg"><img src="./imgs/02.jpg"></a></div>
+      <div class="swiper-slide"><a data-fancybox href="./imgs/03.jpg"><img src="./imgs/03.jpg"></a></div>
+    </div>
+    <div class="swiper-pagination"></div>
+    <div class="swiper-button-prev"></div>
+    <div class="swiper-button-next"></div>
+  </div>
+  <script src="./libs/jquery.js"></script>
+  <script src="./libs/swiper.min.js"></script>
+  <script src="./libs/jquery.fancybox.min.js"></script>
+  <script src="./libs/marquee.js"></script>
+  <script src="./js/main.js"></script>
+</body>
+
+</html>
diff --git a/libs/jquery.fancybox.min.js b/libs/jquery.fancybox.min.js
diff --git a/libs/marquee.js b/libs/marquee.js
@@ -1,5 +1,17 @@
 $.fn.marquee = function() {
-  // 可翻页
-  // popup when click
-  // 可以用 fancybox
+  // 初始化swiper
+  // TODO: 轮播逻辑看了一下同学写的，大概清楚，等有能力的时候再改为手写的逻辑。
+  new Swiper('.swiper-container', {
+    loop: true,
+    lazy: {
+      loadPrevNext: true,
+    },
+    navigation: {
+      nextEl: '.swiper-button-next',
+      prevEl: '.swiper-button-prev',
+    },
+    pagination: {
+      el: '.swiper-pagination',
+    }
+  });
 }
diff --git a/libs/swiper.min.js b/libs/swiper.min.js