fullstack-star · TechMessage · Jun 12, 2019
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,83 @@
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+}
+
+i {
+    font-style: normal;
+}
+
+ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+li {
+    margin: 0;
+    padding: 0;
+}
+
+img {
+    vertical-align: middle;
+}
+
+#marquee {
+    overflow: hidden;
+    position: relative;
+}
+
+
+
+#marquee .indicator {
+    position: absolute;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    font-size: 30px;
+    width: 50px;
+    top: 50%;
+    transform: translateY(-50%);
+    left: 0;
+    display: none;
+    background: rgba(255, 255, 255, .2);
+    cursor: pointer;
+    user-select: none;
+    z-index: 666;
+}
+
+#marquee .indicator.arrow-next {
+    right: 0;
+    left: unset;
+}
+
+#marquee:hover .indicator {
+    display: block;
+}
+
+#marquee ul {
+    position: absolute;
+    left: 0;
+    display: flex;
+    flex-wrap: nowrap;
+}
+
+body .modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    z-index: 999;
+    background: rgba(0, 0, 0, 0.8);
+    display: none;
+    text-align: center;
+}
+
+body .modal img {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(1.5);
+}
diff --git a/img/1.jpg b/img/1.jpg
diff --git a/img/2.jpg b/img/2.jpg
diff --git a/img/3.jpg b/img/3.jpg
diff --git a/img/4.jpg b/img/4.jpg
diff --git a/img/5.jpg b/img/5.jpg
diff --git a/index.html b/index.html
@@ -1,6 +1,37 @@
-<div id="marquee">
-  <img>
-  <img>
-  <img>
-</div>
-<script src="./libs/jquery.js"></script>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Document</title>
+  <link rel="stylesheet" href="./css/style.css">
+  <style>
+    .example {
+      width: 80%;
+      margin: 0px auto;
+      display: flex;
+      justify-content: center;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="example">
+    <div id="marquee">
+      <ul>
+        <li><img src="./img/1.jpg" alt=""></li>
+        <li><img src="./img/2.jpg" alt=""></li>
+        <li><img src="./img/3.jpg" alt=""></li>
+        <li><img src="./img/4.jpg" alt=""></li>
+        <li><img src="./img/5.jpg" alt=""></li>
+      </ul>
+    </div>
+  </div>
+  <script src="./libs/jquery.js"></script>
+  <script src="./libs/marquee.js"></script>
+  <script src="./js/main.js"></script>
+</body>
+
+</html>
diff --git a/libs/marquee.js b/libs/marquee.js
@@ -1,5 +1,58 @@
-$.fn.marquee = function() {
+$.fn.marquee = function () {
   // 可翻页
-  // popup when click
-  // 可以用 fancybox
+  var container = $('#marquee');
+  var ul = container.children('ul');
+  var index = 0; //初始显示图片的索引值
+  var imgCounts = ul.find('img').length;
+  // 获取单张图片的长 宽属性
+  var imgObj = $('#marquee img').eq(0);
+  if (!imgObj.length) throw new Error('html结构不对')
+
+  // 给容器赋值，长，宽
+  var imgW = imgObj.width();
+  var imgH = imgObj.height();
+  container.width(imgW);
+  container.height(imgH);
+
+  //  添加指示器
+  container.append('<i class="indicator arrow-next">&gt;</i>');
+  container.children(':first-child').before('<i class="indicator arrow-prev">&lt;</i>');
+
+  // 添加一张假图，过渡使用
+  ul.children('li').eq(0).clone().appendTo(ul);
+
+  //  指示器点击事件，切换图片
+  container.children('.indicator').click(function (e) {
+    if ($(this).hasClass('arrow-next')) {
+      //点击的下一张
+      if (index == imgCounts) {
+        index = 0;
+        ul.css('left', -index * imgW)
+      }
+      index++;
+
+    } else {
+      if (index == 0) {
+        index = imgCounts;
+        ul.css('left', -index * imgW)
+      }
+      index--;
+    }
+    ul.animate({ left: -index * imgW + 'px' })
+  })
+
+  //图片放大事件
+  $('body').append('<div class="modal"><img></div>');
+  var modal = $('body .modal');
+
+  $('#marquee img').click(function () {
+    modal.children('img').get(0).src = this.src;
+    modal.show()
+  })
+
+  modal.click(function (e) {
+    if (e.target == modal[0]) {
+      modal.hide();
+    }
+  })
 }