Merge branch 'gzb' of http://git.xhkjedu.com/xhkjedu/xh_web into gzb

css/index.css

@@ -4,7 +4,7 @@
   height: 9.42rem;
   object-fit: cover;
 }
-.home_swiper_container.swiper-container .swiper-wrapper .swiper-slide::after {
+/* .home_swiper_container.swiper-container .swiper-wrapper .swiper-slide::after {
   content: "";
   position: absolute;
   width: 100%;
@@ -17,6 +17,44 @@
     rgba(50, 55, 62, 0) 30.34%,
     rgba(13, 27, 46, 0.7) 100%
   );
+} */
+/* 
+width: 13%;
+height: 3px;
+background-color: rgba(255, 255, 255, 0.3);
+opacity: 1;
+border-radius: 0;
+margin: 0px 10px 0px 0px !important;
+position: relative;
+*/
+.home_swiper_pagination.swiper-pagination {
+  left: 0.8rem;
+  right: 0;
+  bottom: 1.5rem !important;
+  margin: 0 auto;
+  width: 13rem;
+  height: 0.1rem;
+  text-align: left;
+}
+.home_swiper_pagination .pagination_item {
+  position: relative;
+  float: left;
+  margin-right: 0.4rem;
+  width: 1.5rem;
+  height: 4px;
+  background-color: rgba(255, 255, 255, 0.3);
+  opacity: 1;
+  overflow: hidden;
+  /* cursor: pointer; */
+}
+.home_swiper_pagination .pagination_item .pagination_item_progress {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 0;
+  height: 4px;
+  background-color: #fff;
+  /* cursor: pointer; */
 }
 .home_main {
   background-color: #fff;

index.html

@@ -23,7 +23,14 @@
         </div>
       </div>
       <!-- 如果需要分页器 -->
-      <div class="swiper-pagination"></div>
+      <div class="swiper-pagination home_swiper_pagination">
+        <div data-index="0" class="pagination_item">
+          <div class="pagination_item_progress"></div>
+        </div>
+        <div data-index="1" class="pagination_item">
+          <div class="pagination_item_progress"></div>
+        </div>
+      </div>
     </div>
     <div class="home_main">
       <div class="home_superiority_title">我们的优势</div>
@@ -129,27 +136,37 @@
     </div>
     <div class="home_serve">
       <div class="home_serve_main">
-        <div class="home_serve_title">多项服务保障<br/>让学校、老师、学生无忧</div>
+        <div class="home_serve_title">
+          多项服务保障<br />让学校、老师、学生无忧
+        </div>
         <div class="home_serve_item_box">
           <div class="home_serve_item">
             <img src="./img/home/serve/hailiangshujuziyuan.png" />
             <div class="home_serve_item_title">海量数据资源</div>
-            <div class="home_serve_item_stitle">优质海量资源，教师不需要重新收集整理</div>
+            <div class="home_serve_item_stitle">
+              优质海量资源，教师不需要重新收集整理
+            </div>
           </div>
           <div class="home_serve_item">
             <img src="./img/home/serve/jingzhunhuaxiang.png" />
             <div class="home_serve_item_title">精准画像</div>
-            <div class="home_serve_item_stitle">全程采集教学数据，深度挖掘开发精准画像，指导师生发展</div>
+            <div class="home_serve_item_stitle">
+              全程采集教学数据，深度挖掘开发精准画像，指导师生发展
+            </div>
           </div>
           <div class="home_serve_item">
             <img src="./img/home/serve/jiaoxueshujufenxi.png" />
             <div class="home_serve_item_title">教学数据分析</div>
-            <div class="home_serve_item_stitle">薄弱知识点，归纳错因，体现能力变化曲线，帮助学生针对性训练</div>
+            <div class="home_serve_item_stitle">
+              薄弱知识点，归纳错因，体现能力变化曲线，帮助学生针对性训练
+            </div>
           </div>
           <div class="home_serve_item">
             <img src="./img/home/serve/zhihuipiyuejishu.png" />
             <div class="home_serve_item_title">智慧批阅技术</div>
-            <div class="home_serve_item_stitle">一键组题自动同步至学生空间，学生提交后，平台自动批阅</div>
+            <div class="home_serve_item_stitle">
+              一键组题自动同步至学生空间，学生提交后，平台自动批阅
+            </div>
           </div>
         </div>
       </div>

js/index.js

@@ -3,10 +3,36 @@ $(function () {
   $(".footer_root").load("./sections/comm/footer.html");
   // nav传值显示下划线
   $(".header_root").data("nav_info", null);
-  let mySwiper = new Swiper ('.home_swiper_container.swiper-container', {
+  let _homeSwiperTimer = null;
+  let homeSwiper = new Swiper(".home_swiper_container.swiper-container", {
     loop: true,
     autoplay: 5000,
     // 如果需要分页器
-    pagination: '.swiper-pagination'
-  })
-});
+    pagination: ".swiper-pagination",
+    autoplayDisableOnInteraction : false,
+    paginationType: "custom",
+    onSlideChangeStart: function(_swiper){
+      if (_homeSwiperTimer) {
+        clearInterval(_homeSwiperTimer);
+      }
+      $(".home_swiper_pagination .pagination_item_progress").each(function(i, element){
+        element.style.width = "0%";
+      });
+    },
+    onSlideChangeEnd: function(_swiper){
+      if (_homeSwiperTimer) {
+        clearInterval(_homeSwiperTimer);
+      }
+      let _width = 0;
+      _homeSwiperTimer = setInterval(function() {
+        _width += 1;
+        if ($(".home_swiper_pagination .pagination_item_progress")[_swiper.realIndex]) {
+          $(".home_swiper_pagination .pagination_item_progress")[_swiper.realIndex].style.width = _width + "%";
+          if (_width === 100 && _homeSwiperTimer) {
+            clearInterval(_homeSwiperTimer);
+          }
+        }
+      }, 50);
+    }
+  });
+});