产品中心

css/product.css

@@ -189,6 +189,7 @@
 }
 .exam_item {
   height: 1rem;
+  margin-bottom: 0.2rem;
 }
  
 .exam_item img{
@@ -197,20 +198,24 @@
 }
 .exam_content {
   width: 100%;
-  height: 5rem;
+  height: 6rem;
   position: relative;
   overflow: hidden;
 }
 .show_exam{
   width: 100%;
-  height: 5rem;
+  height:  100%;
   position: absolute;
   top: 0;
   left: 0;
 }
+.exam_slide{
+  width: 100%;
+  height:  100%;
+}
 .exam_content img {
   width: 9.8rem;
-  height: 5rem;
+  height:  100%;
   object-fit: cover;
 }
 .exam_slide{

js/product.js

@@ -1,5 +1,5 @@
 //获取元素
-var divheight = $(".show_exam:first").height();
+var divheight = $(".exam_one").height()-70;
 var container = $(".exam_container");
 var list = $(".show_exam");
 var buts = $(".exam_item");
@@ -13,13 +13,21 @@ function animate(offset) {
   var top = parseInt(list.css("top")) + offset;
   console.log(list.css("top"));
   var absnum = Math.abs(offset);
-  console.log(index, top, offset);
+  index++
+ 
   // 边界判断
-  if (offset > 0) {
-    offset = "+=" + offset;
-  } else {
-    offset = "-=" + Math.abs(offset);
+  // if (offset > 0) {
+  //   offset = "+=" + offset;
+  // } else {
+  //   offset = "-=" + Math.abs(offset);
+  // }
+  offset = "-=" + Math.abs(offset);
+  if(index == 6){
+    index = 1;
+    offset=0;
+    console.log("最后一个");
   }
+  console.log("当前索引",index, top, offset)
   list.animate({ top: offset }, 300, function () {
     if (top > -200) {
     }

sections/product.html

@@ -166,7 +166,7 @@
                 <div class="show_exam">
                   <div class="exam_slide">
                     <span>1</span>
-                    <img src="../img/product/mtznh.png" />
+                    <img class="exam_one" src="../img/product/mtznh.png" />
                   </div>
                   <div class="exam_slide">
                     <span>2</span>