xh_web/js/about.js

var datalist = [
  { time: 2023 },
  { time: 2022 },
  { time: 2021 },
  { time: 2020 },
  { time: 2019 },
  { time: 2018 },
  { time: 2017 }
];

// 请求接口前缀 3.6.1 中文列表
var Baseurl = "https://xhwebapitest.xhkjedu.com/dh/listc";
$.ajax({
  type: "POST",
  url: Baseurl,
  dataType: "json",
  async: false,
  contentType: "application/json; charset=utf-8",
  success: function (data) {
    if (data.code === 0) {
      // datalist = data.obj;
    } else {
      alert(data.msg);
    }
  }
});
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"); //默认第一个添加背景色
function showdata(index) {
  var list = datalist[index].details,
    html = '<div class="dev_list">';
  if (!list || list.length == 0) {
    return;
  }
  $.each(list, (idx, item) => {
    if (idx % 4 == 0 && idx) {
      html += '</div><div class="dev_list">';
    }

    html += `<div class="dev_item" title="${item.content}">
                <span>${item.dhmonth}</span> &nbsp;-&nbsp; ${item.content}
              </div>`;
  });
  if (list.length < 9) {
    html += '</div><div class="dev_list">';
  } else if (list.length < 5) {
    html += '</div><div class="dev_list"></div><div class="dev_list"></div>';
  }
  $(".develop_data").html(html);
}
//获取元素
var divwidth = $(".round_q:first").width() - 54;
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; //当前偏移量
function animate(offset) {
  if (datalist.length <= 5) {
    return;
  }
  var left = parseInt(list.css("left")) + offset;
  var absnum = Math.abs(offset);
  if (left < 0 - offsetpx) {
    //右侧没有数据时不偏移
    return;
  }
  // 边界判断
  if (offset > 0) {
    offset = "+=" + offset;
    offleft = offleft + absnum;
  } else {
    offset = "-=" + Math.abs(offset);
    offleft = offleft - absnum;
  }
  if (index < 5 && offleft >= 0) {
    return;
  }
  list.animate({ left: offset }, 300, function () {
    if (left > -200) {
      // list.css("left", (0 - offset) * len);
    }
    if (index == datalist.length) {
      //轮播最后一条
      offset = 0 - (datalist.length - 5) * absnum;
      offleft = offset;
      list.css("left", offset);
    }
  });
}
//点击高亮滚动
function animates(offset) {
  if (datalist.length <= 5) {
    return;
  }
  var left = parseInt(list.css("left")) + offset; //获取元素属性
  if (index < 6 && left >= 0) {
    list.animate({ left: 0 }, 300, function () {});
    return;
  }
  // 边界判断
  if (left < 0 - offsetpx) {
    offset = 0 - offsetpx;
  } else {
    if (offset > 0) {
      offset = "+=" + divwidth;
      offleft = offleft;
    } else {
      offset = "-=" + divwidth;
      offleft = offset;
    }
  }
  list.animate({ left: offset }, 300, function () {});
}
//亮起小圆点
function showButton() {
  //当前图片的小圆点亮起，其他小圆点不亮
  buts
    .eq(index - 1)
    .addClass("active")
    .siblings()
    .removeClass("active");
}

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

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

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

  // 判断当前图片是否是最后一张
  if (index == datalist.length) {
    index = 1;
    offleft = 0;
    list.animate({ left: 0 }, 300, () => {});
  } else {
    index += 1;
  }
  animate(0 - divwidth);
  showdata(index - 1);
  showButton();
  stop();
});

// 左按钮事件
prev.bind("click", function () {
  if (datalist.length <= 5) {
    return;
  }
  // 判断当前是否在动画
  if (list.is(":animated")) {
    return;
  }

  // 判断当前图片是否是第一张
  if (index == 1) {
    index = datalist.length;
  } else {
    index -= 1;
  }
  stop();
  animate(divwidth);
  showdata(index - 1);
  showButton();

 
});

// 小圆点点击事件
buts.each(function () {
  $(this).bind("click", function () {
    // 判断当前是否在进行动画
    if (list.is(":animated") || $(this).attr("class") == "on") {
      return;
    }
    var myIndex = parseInt($(this).attr("index"));
    if (myIndex == index) {
      return;
    }
    //计算偏移量
    var offset = (0 - divwidth) * (myIndex - index);
    index = myIndex;
    animates(offset);
    // list.animate({ left: -360 });
    
    showdata(index - 1);
    showButton();
    stop();
  });
});
showdata(0);
container.hover(stop, play);

play();