xh_web/js/about.js

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

var html = "";
$.each(datalist, (idx, item) => {
  html += `<div class="round_q">
                    <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;

function animate(offset) {
  console.log(index);
  var left = parseInt(list.css("left")) + offset;
  console.log(left, offset);
  // 边界判断
  if (offset > 0) {
    offset = "+=" + offset;
  } else {
    offset = "-=" + Math.abs(offset);
  }

  list.animate({ left: offset }, 300, function () {
    if (left > -200) {
      console.log(22);
      list.css("left", (0 - offset) * len);
    }
    console.log(offset * len);
    if (left < offset * len) {
      console.log(111);
      list.css("left", 0 - offset);
    }
  });
}

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

// 鼠标离开图片区域时，轮播继续
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 == 5) {
    index = 1;
  } else {
    index += 1;
  }
  console.log("you", index);
  animate(0 - divwidth);
  showButton();
});

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

  // 判断当前图片是否是第一张
  if (index == 1) {
    index = 5;
  } else {
    index -= 1;
  }
  console.log(zuo, index);
  animate(divwidth);
  showButton();
});

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

//     //切换后，更新当前的偏移量
//     index = myIndex;

//     showButton();
//   });
// });

container.hover(stop, play);

play();