第一节课作业-MxKing

css/style.css

@@ -0,0 +1,45 @@
+#marquee {
+    position: relative;
+    margin: 100px auto 0;
+	width: 1000px;
+}
+
+#marquee img {
+	width: 100%;
+}
+
+#marquee-wrapper {
+    display: flex;
+    overflow: hidden;
+}
+
+#marquee-wrapper img {
+    display: none;
+    width: 1000px;
+}
+
+#marquee-wrapper img.active{
+    display: block;
+    transition: all .1s;
+}
+
+.slide-arrow {
+    user-select: none;
+    cursor: pointer;
+    position: absolute;
+    display: block;
+    font-size: 30px;
+    height: 30px;
+    line-height: 30px;
+    color: #ddd;
+    top: 50%;
+    margin-top: -15px;
+}
+
+.slide-right {
+    right: 10px;
+}
+.slide-left {
+    left: 10px;
+}
+

index.html

@@ -1,6 +1,15 @@
+<link rel="stylesheet" href="./css/fancy.css" />
+<link rel="stylesheet" href="./css/style.css" />
+
 <div id="marquee">
-  <img>
-  <img>
-  <img>
+  <div id="marquee-wrapper">
+    <a href="./img/1_b.jpg"><img class="active" src="./img/1.jpg" alt=""></a>
+    <a href="./img/2_b.jpg"><img src="./img/2.jpg" alt=""></a>
+    <a href="./img/3_b.jpg"><img src="./img/3.jpg" alt=""></a>
+    <a href="./img/4_b.jpg"><img src="./img/4.jpg" alt=""></a>
+  </div>
 </div>
 <script src="./libs/jquery.js"></script>
+<script src="./libs/fancy.js"></script>
+<script src="./libs/marquee.js"></script>
+<script src="./js/main.js"></script>

libs/marquee.js

@@ -1,5 +1,70 @@
-$.fn.marquee = function() {
-  // 可翻页
-  // popup when click
-  // 可以用 fancybox
-}
+$.fn.marquee = function (options = {}) {
+  let delay = options.delay || 3000;
+  let timer = null; // 定时器
+  let $imgs = $(this).find('#marquee-wrapper img'); //获取图片
+  let count = $imgs && $imgs.length ? $imgs.length : 0;// 图片个数
+  let currentIndex = 0;
+  const prevArrow = `<span class="slide-arrow slide-left">&lt;</span>`;
+  const nextArrow = `<span class="slide-arrow slide-right">&gt;</span>`;
+  $(this).append(prevArrow).append(nextArrow)
+  // 开始轮播
+  function beginSlide() {
+    let lastTime = (new Date()).valueOf();
+    timer = setInterval(function () {
+      const now = (new Date()).valueOf();
+      if (now - lastTime >= delay) {
+        lastTime = now;
+        nextClick();
+        changeImg(currentIndex)
+      }
+    }, 10)
+
+  }
+
+  function changeImg(imgIndex) {
+    $imgs.hide();
+    $imgs.removeClass('active');
+    $($imgs[imgIndex]).show();
+    $($imgs[imgIndex]).addClass('active');
+  }
+
+  // 前一箭头点击事件
+  function prevClick() {
+    clearInterval(timer)
+    if(currentIndex === 0) {
+      currentIndex = count - 1;
+    } else {
+      currentIndex--;
+    }
+    changeImg(currentIndex);
+    beginSlide();
+  }
+
+  // 后一个箭头点击事件
+  function nextClick() {
+    clearInterval(timer)
+    if(currentIndex === count - 1) {
+      currentIndex = 0
+    } else {
+      currentIndex++;
+    }
+    changeImg(currentIndex);
+    beginSlide();
+  }
+  $('.slide-left').on('click', prevClick);
+  $('.slide-right').on('click', nextClick);
+  popup()
+  beginSlide();
+  function popup () {
+    // 添加点击放大图片效果
+    $imgs.fancybox({
+      beforeShow: function () {
+        clearInterval(timer)
+      },
+      afterClose: function() {
+        changeImg(currentIndex);
+        beginSlide();
+      }
+    })
+  }
+}