fullstack-star · Ross01859 · Jun 11, 2019
diff --git a/.DS_Store b/.DS_Store
diff --git a/css/shuffing.css b/css/shuffing.css
@@ -0,0 +1,32 @@
+#marquee {
+    width: 600px;
+    height: 300px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin: auto;
+  }
+
+  .control-btn{
+    width: 30px;
+    height: 30px;
+    line-height: 30px;
+    cursor: pointer;
+    position: absolute;
+    top: 50%;
+    font-size: 30px;
+    color: #ffffff;
+    text-align: center;
+    background: #3f3f3f;
+  }
+  .control-btn.next{
+    right: 0px;
+  }
+  .control-btn.prev{
+    left: 0;
+  }
+  #marquee a img {
+    width: 100%;
+  }
diff --git a/imgs/1.jpg b/imgs/1.jpg
diff --git a/imgs/2.jpg b/imgs/2.jpg
diff --git a/imgs/3.jpg b/imgs/3.jpg
diff --git a/imgs/4.jpg b/imgs/4.jpg
diff --git a/index.html b/index.html
@@ -1,6 +1,33 @@
-<div id="marquee">
-  <img>
-  <img>
-  <img>
-</div>
-<script src="./libs/jquery.js"></script>
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+  <title>Index</title>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css" />
+  <link rel="stylesheet" href="./css/shuffing.css">
+</head>
+
+<body>
+  <div id="marquee">
+    <span class="control-btn prev">
+      &lt;
+    </span> <a href="./imgs/1.jpg"><img src="./imgs/1.jpg" alt="" /></a>
+    <span class="control-btn next">
+      &gt;
+    </span>
+  </div>
+  <script src="./libs/jquery.js"></script>
+  <script src="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.js"></script>
+  <script src="./libs/marquee.js"></script>
+  <script charset="utf-8">
+    var data = ['./imgs/1.jpg', './imgs/2.jpg', './imgs/3.jpg', './imgs/4.jpg']
+    var options = {
+      interval:2000
+    }
+    $("#marquee").marquee(data,options)
+  </script>
+</body>
+
+</html>
diff --git a/libs/marquee.js b/libs/marquee.js
@@ -1,5 +1,64 @@
-$.fn.marquee = function() {
-  // 可翻页
-  // popup when click
-  // 可以用 fancybox
-}
+/**
+ * @param {Array} 轮播图片数据
+ * @param {Object} 配置参数
+ */
+$.fn.marquee = function (data, options) {
+  if (!data instanceof Array) return
+  if (typeof options !== 'object') return
+  var count = 0
+  var timer
+  var config = {
+      interval: options.interval || 2000
+  }
+  var methods = {
+      // 自动轮播初始化
+      init: function () {
+          timer = setInterval(function () {
+              count++
+              methods.render()
+          }, config.interval)
+      },
+      // 更新数据
+      render: function () {
+          console.log(count)
+          count = count % data.length
+          $('#marquee a').attr('href', data[count]);
+          $('#marquee a img').attr('src', data[count]);
+      },
+      next: function () {
+          count += 1
+          this.render()
+      },
+      prev: function () {
+          count = count ? count - 1 : data.length - 1
+          this.render()
+      }
+  }
+  //  点击下一张
+  $(".control-btn.next").on('click', function () {
+      console.log('next')
+      clearInterval(timer)
+      methods.next()
+  })
+  // 点击上一张
+  $(".control-btn.prev").on('click', function () {
+      console.log('prev')
+      clearInterval(timer)
+      methods.prev()
+  })
+  // 绑定fancybox
+  $.each($("#marquee a"), function (indexInArray, valueOfElement) {
+      $(valueOfElement).fancybox()
+  });
+  // 鼠标移入暂停
+  $('#marquee').mouseover(function () {
+      console.log('鼠标移入暂停播放')
+      clearInterval(timer)
+  });
+  // 鼠标移除开始
+  $('#marquee').mouseleave(function () {
+      console.log('鼠标移除开始播放')
+      methods.init()
+  });
+  methods.init()
+}