关于我们

css/about.css

   left: 50%;
   transform: translate(-50%, 0);
 }
-.area_bot{
+.area_bot {
   margin-top: 0.3rem;
 }
-.ab_minsin{
+.ab_minsin {
   width: 100%;
   height: 3.2rem;
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
 }
-.area_four{
+.area_four {
   display: flex;
   justify-content: space-between;
 }
-.area_fs{
+.area_fs {
   width: 2.8rem;
-  height: 3.2rem;
+  height: 3rem;
   background-color: white;
   color: #333333;
   text-align: center;
   padding: 0 0.1rem;
   box-sizing: border-box;
 }
-.area_fs img{
+.area_fs img {
   width: 0.9rem;
   height: 0.8rem;
   margin: 0 auto 0;
 }
 .area_fs div {
   font-size: 0.18rem;
-  line-height: 0.4rem;
+  line-height: 0.5rem;
 }
 .area_fs p {
   font-size: 0.14rem;
   line-height: 0.24rem;
   margin-top: 0;
 }
-.develop_container{
+.develop_container {
   height: 1.6rem;
   position: relative;
 }
-.jt{
+.jt {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   cursor: pointer;
   z-index: 1000;
 }
-.leftjt{
+.leftjt {
   left: 0;
 }
-.rightjt{
+.rightjt {
   right: 0;
 }
-.showdata{
+.showdata {
   width: 90%;
   height: 1.6rem;
   margin: 0 auto;
   position: relative;
+  /* overflow: hidden; */
 }
-.line{
+.line {
   width: 100%;
   height: 0.04rem;
   background-color: #f3f4f8ff;
   position: absolute;
   top: 50%;
-    transform: translateY(-50%);
+  transform: translateY(-50%);
 }
-.rounds{
+.rounds {
   width: 100%;
   position: absolute;
-    top: 25%;
-    left: 0;
-    transform: translate(0, -50%);
-    white-space: nowrap;
+  top: 25%;
+  left: 0;
+  transform: translate(0, -50%);
+  white-space: nowrap;
 }
-.round_q{
+.round_q {
   display: inline-block;
   width: 2.34rem;
   height: 100%;
 }
-.round_item{
+.round_item {
   margin: 0 auto;
   width: 0.18rem;
   height: 0.18rem;
   position: relative;
   cursor: pointer;
 }
-.round_i{
+.round_i {
   position: absolute;
   top: 50%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   width: 0.12rem;
-    height: 0.12rem; 
-    background-color: #e4e4e4ff;
-    border-radius: 50%;
+  height: 0.12rem;
+  background-color: #e4e4e4ff;
+  border-radius: 50%;
 }
-.round_d{
+.round_d {
   width: 0.9rem;
   text-align: center;
   font-size: 0.18rem;
   top: 0.4rem;
   left: -0.35rem;
 }
-.active .round_item{
+.active .round_item {
   border-color: #016cff;
-
 }
 .active .round_i {
   background-color: #016cff;
-
 }
 .active .round_d {
   color: #016cff;
   font-size: 0.36rem;
   font-weight: bold;
-}
+}

js/about.js

+// 请求接口前缀
+var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/list";
+// $.ajax({
+//   type: "POST",
+//   url: Baseurl,
+//   data: JSON.stringify({
+//     examid: 434,
+//     classid: 9666
+//   }),
+//   dataType: "json",
+//   contentType: "application/json; charset=utf-8",
+//   success: function (data) {
+//     if (data.code === 0) {
+//       loadSectionHtml(data.obj);
+//     } else {
+//       alert(data.msg);
+//     }
+//   }
+// });
 var datalist = [
   { time: 2023 },
   { time: 2022 },
   { time: 2021 },
   { time: 2020 },
   { time: 2019 },
-  { time: 2018 }
+  { time: 2018 },
+  { time: 2017 }
 ];
 
 var html = "";
 $.each(datalist, (idx, item) => {
-  html += `<div class="round_q">
+  html += `<div class="round_q" index = "${idx + 1}">
                     <div class="round_item">
                     <div class="round_i"></div>
                     <div class="round_d">${item.time}</div>
 var next = $(".rightjt");
 
 var index = 1; //存放当前显示的图片的下标
-var len = 5;
+var len = 5; //显示数量
 var interval = 5000; //位移时间间隔
 var timer;
-
+var offsetpx = (datalist.length - len) * divwidth; //可偏移度
+var offleft = 0; //当前偏移量
+console.log(offsetpx);
 function animate(offset) {
   console.log(index);
   var left = parseInt(list.css("left")) + offset;
   console.log(left, offset);
+  var absnum = Math.abs(offset);
+  if (left < 0 - offsetpx) {
+    //右侧没有数据时不偏移
+    return;
+  }
   // 边界判断
   if (offset > 0) {
     offset = "+=" + offset;
+    offleft = offleft + absnum;
+    console.log(offset);
   } else {
     offset = "-=" + Math.abs(offset);
+    offleft = offleft - absnum;
+    console.log(0 - absnum, absnum);
+  }
+  // if (index == datalist.length) {
+  //   offset = 0 - (datalist.length - 5) * absnum;
+  //   offleft = offset;
+  //   console.log(offset);
+  // }
+  console.log(offset, offleft, "当前偏移量");
+  if (offset >= 0) {
+    console.log(44444);
+    return;
   }
-
   list.animate({ left: offset }, 300, function () {
     if (left > -200) {
-      console.log(22);
+      console.log(22, (0 - offset) * len);
       list.css("left", (0 - offset) * len);
     }
-    console.log(offset * len);
-    if (left < offset * len) {
-      console.log(111);
-      list.css("left", 0 - offset);
+    if (index == datalist.length) {
+      offset = 0 - (datalist.length - 5) * absnum;
+      offleft = offset;
+      list.css("left", offset);
+      console.log(offset, 1231312);
     }
   });
 }
 //亮起小圆点
 function showButton() {
   //当前图片的小圆点亮起，其他小圆点不亮
-  console.log("gaoliang");
+  console.log(index, "gaoliang");
   buts
     .eq(index - 1)
     .addClass("active")
     .removeClass("active");
 }
 
+$(".develop_container").bind("mouseenter", () => {
+  stop();
+});
+$(".develop_container").bind("mouseleave", () => {
+  play();
+});
 // 鼠标离开图片区域时，轮播继续
 function play() {
   timer = setTimeout(function () {
   }
 
   // 判断当前图片是否是最后一张
-  if (index == 5) {
+  if (index == datalist.length) {
     index = 1;
+    console.log(222222);
+    offleft = 0;
+    list.animate({ left: 0 }, 300, () => {});
   } else {
     index += 1;
   }
+  console.log(offleft, "当前偏移量");
   console.log("you", index);
   animate(0 - divwidth);
   showButton();
+  stop();
 });
 
 // 左按钮事件
   if (list.is(":animated")) {
     return;
   }
-
+  console.log(index);
   // 判断当前图片是否是第一张
   if (index == 1) {
-    index = 5;
+    index = datalist.length;
   } else {
     index -= 1;
   }
-  console.log(zuo, index);
+  console.log("zuo", index);
+  console.log(offleft, "当前偏移量");
   animate(divwidth);
   showButton();
+  stop();
 });
 
 // 小圆点点击事件
-// buttons.each(function () {
-//   $(this).bind("click", function () {
-//     // 判断当前是否在进行动画
-//     if (list.is(":animated") || $(this).attr("class") == "on") {
-//       return;
-//     }
-//     // 获取属性
-//     var myIndex = parseInt($(this).attr("index"));
-
-//     //计算偏移量
-//     var offset = -600 * (myIndex - index);
-
-//     animate(offset);
+buts.each(function () {
+  $(this).bind("click", function () {
+    // 判断当前是否在进行动画
+    if (list.is(":animated") || $(this).attr("class") == "on") {
+      return;
+    }
+    // 获取属性
+    var myIndex = parseInt($(this).attr("index"));
+    console.log(myIndex);
+    //计算偏移量
+    var offset = (0 - divwidth) * (myIndex - index);
+    if (myIndex <= 2) {
+      offset = 0;
+      console.log(myIndex, 33333);
+    }
+    console.log(offleft, "当前偏移量");
+    animate(offset);
 
-//     //切换后，更新当前的偏移量
-//     index = myIndex;
+    //切换后，更新当前的偏移量
+    index = myIndex;
 
-//     showButton();
-//   });
-// });
+    showButton();
+  });
+});
 
 container.hover(stop, play);