xh_web/js/about.js

$(function () {
  $(".header_root").load("./comm/header.html");
  $(".footer_root").load("./comm/footer.html");
  var datalist = [
    { time: 2023 },
    { time: 2022 },
    { time: 2021 },
    { time: 2020 },
    { time: 2019 },
    { time: 2018 },
    { time: 2017 }
  ];

  // 请求接口前缀 3.6.1 中文列表
  $.ajax({
    type: "POST",
    url: $.baseUrl + "dh/listc",
    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.dhyear || 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();
  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");
  }

  // 鼠标离开图片区域时，轮播继续
  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);

      showdata(index - 1);
      showButton();
      stop();
    });
  });
  showdata(0);
  $(".develop_container").hover(stop, play);

  play();
});