评测系统

css/product.css

 .exam_slide{
   width: 100%;
   height:  100%;
+  position: absolute;
 }
 .exam_content img {
   width: 100%;
   height:  100%;
   /* object-fit: cover; */
 }
-.exam_slide{
-  position: relative;
-}
 .exam_slide span{
   position: absolute;
 }

js/product.js

   //获取元素
   var divheight = $(".exam_one").height();
   var container = $(".exam_container");
+  var exam_slide = $(".exam_slide"); //右侧图片
   var list = $(".show_exam");
   var buts = $(".exam_item");
   var index = 0; //存放当前显示的图片的下标
+  var beforeidx = 0; //之前的索引
   var interval = 5000; //位移时间间隔
   var timer;
   var blue = $(".blue");
   var grey = $(".grey");
+  var that = $;
   function animate(offset, type) {
     var top = parseInt(list.css("top")) + offset;
     // console.log(list.css("top"));
     var absnum = Math.abs(offset);
-    index++;
-    offset = "-=" + Math.abs(offset);
-    if (index == 5) {
-      index = 0;
-      offset = 0;
-    }
+    $.each(exam_slide, (idx, item) => {
+      if (index != idx) {
+        //隐藏
+        exam_slide.eq(idx).css("visibility", "hidden");
+      } else {
+        //显示当前索引图片
+        exam_slide.eq(idx).css("visibility", "visible");
+      }
+    });
+
     if (!type) {
+      beforeidx = index;
+      index++;
+      offset = "-=" + Math.abs(offset);
+      if (index == 5) {
+        index = 0;
+        offset = 0;
+      }
+
       showButton();
     }
-    list.animate({ top: offset }, 300, function () {
-      if (top > -200) {
+    if (index > beforeidx) {
+      console.log("从下往上滚");
+    } else {
+      console.log("从上往下滚");
+    }
+    console.log("当前索引", index, "上一个索引", beforeidx);
+
+    exam_slide.eq(beforeidx).animate(
+      {
+        visibility: "hidden",
+        transformOrigin: "top center",
+        transform: "scale(0)"
+      },
+      500,
+      () => {
+        console.log("动画完成");
+        if (type) {
+          beforeidx = index;
+        }
       }
-    });
+    );
   }
   var imglist = [
     {
   buts.on({
     mouseenter: function () {
       //移入
+      var myIndex = parseInt($(this).attr("index"));
+      $.each(grey, function (idx, item) {
+        $(this).show();
+      });
       $.each(blue, function (idx, item) {
-        $(this).hide();
+        if (idx == myIndex) {
+          $(this).show();
+        } else {
+          $(this).hide();
+        }
       });
-      var myIndex = parseInt($(this).attr("index"));
-      blue.eq(myIndex).show();
       index = myIndex;
       animate(divheight, 1);
-      console.log("移入当前索引", myIndex);
     },
-    mouseleave: function () {
-      //移出
-      var myIndex = parseInt($(this).attr("index"));
-      if (myIndex != 0 && myIndex != 4) {
-        console.log(123);
-        blue.eq(myIndex).hide();
-        grey.eq(myIndex).show();
-      }
-
-      console.log("移出当前索引", myIndex);
-    }
+    mouseleave: function () {}
   });
   // 回到顶部
   $(".top").on("click", function () {

sections/product.html

               <div class="exam_content">
                 <div class="show_exam">
                   <div class="exam_slide">
-                    <img class="exam_one" src="../img/product/mtznh.png" />
+                    <img src="../img/product/mtznh.png" />
                   </div>
                   <div class="exam_slide">
                     <img src="../img/product/zdqss.png" />