xh_web/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: 2017 }
];

var html = "";
$.each(datalist, (idx, item) => {
  html += `<div class="round_q" index = "${idx + 1}">
                    <div class="round_item">
                    <div class="round_i"></div>
                    <div class="round_d">${item.time}</div>
                  </div></div>`;
});
$(".rounds").width(datalist.length * 2.34 + "rem");
$(".rounds").html(html);
$(".round_q:first").addClass("active"); //默认第一个添加背景色
//获取元素
var divwidth = $(".round_q:first").width() - 54;
console.log(divwidth);
var container = $(".showdata");
var list = $(".rounds");
var buts = $(".round_q");
var prev = $(".leftjt");
var next = $(".rightjt");

var index = 1; //存放当前显示的图片的下标
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, (0 - offset) * len);
      list.css("left", (0 - offset) * len);
    }
    if (index == datalist.length) {
      offset = 0 - (datalist.length - 5) * absnum;
      offleft = offset;
      list.css("left", offset);
      console.log(offset, 1231312);
    }
  });
}

//亮起小圆点
function showButton() {
  //当前图片的小圆点亮起，其他小圆点不亮
  console.log(index, "gaoliang");
  buts
    .eq(index - 1)
    .addClass("active")
    .siblings()
    .removeClass("active");
}

$(".develop_container").bind("mouseenter", () => {
  stop();
});
$(".develop_container").bind("mouseleave", () => {
  play();
});
// 鼠标离开图片区域时，轮播继续
function play() {
  timer = setTimeout(function () {
    next.trigger("click");
    play();
  }, interval);
}

//鼠标进入图片区域时，停止轮播
function stop() {
  clearTimeout(timer);
}

// 右按钮点击事件
next.bind("click", function () {
  // 判断当前是否在动画
  if (list.is(":animated")) {
    return;
  }

  // 判断当前图片是否是最后一张
  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();
});

// 左按钮事件
prev.bind("click", function () {
  // 判断当前是否在动画
  if (list.is(":animated")) {
    return;
  }
  console.log(index);
  // 判断当前图片是否是第一张
  if (index == 1) {
    index = datalist.length;
  } else {
    index -= 1;
  }
  console.log("zuo", index);
  console.log(offleft, "当前偏移量");
  animate(divwidth);
  showButton();
  stop();
});

// 小圆点点击事件
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;

    showButton();
  });
});

container.hover(stop, play);

play();