xh_web/js/product.js

$(function () {
  $(".header_root").load("./comm/header.html");
  $(".footer_root").load("./comm/footer.html");
  //获取元素
  var divheight = $(".exam_one").height();
  var container = $(".exam_container");
  var list = $(".show_exam");
  var buts = $(".exam_item");
  var index = 0; //存放当前显示的图片的下标
  var interval = 5000; //位移时间间隔
  var timer;

  function animate(offset) {
    var top = parseInt(list.css("top")) + offset;
    console.log(list.css("top"));
    var absnum = Math.abs(offset);
    index++;

    // 边界判断
    // if (offset > 0) {
    //   offset = "+=" + offset;
    // } else {
    //   offset = "-=" + Math.abs(offset);
    // }
    offset = "-=" + Math.abs(offset);
    if (index == 5) {
      index = 0;
      offset = 0;
    }
    showButton();
    console.log("当前索引", index, top, offset);
    list.animate({ top: offset }, 300, function () {
      if (top > -200) {
      }
    });
  }
  var imglist = [
    {
      blue: "../img/product/mtblue.png",
      grey: "../img/product/mtgrey.png"
    },
    {
      blue: "../img/product/zdblue.png",
      grey: "../img/product/zdgrey.png"
    },
    {
      blue: "../img/product/ydblue.png",
      grey: "../img/product/ydgrey.png"
    },
    {
      blue: "../img/product/yyblue.png",
      grey: "../img/product/yygrey.png"
    },
    {
      blue: "../img/product/sjblue.png",
      grey: "../img/product/sjgrey.png"
    }
  ];
  //亮起小圆点
  function showButton() {
    var html = "";
    buts.each(function (idx, item) {
      if (idx == index) {
        $(this).html(`<img src="${imglist[idx].blue}" />`);
      } else {
        $(this).html(`<img src="${imglist[idx].grey}" />`);
      }
    });
  }
  // 鼠标离开图片区域时，轮播继续
  function play() {
    timer = setTimeout(function () {
      animate(divheight);
      play();
    }, interval);
  }

  //鼠标进入图片区域时，停止轮播
  function stop() {
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  }
  // 点击事件
  buts.each(function () {
    $(this).bind("click", function () {
      var myIndex = parseInt($(this).attr("index"));
      if (myIndex == index) {
        return;
      }
      index = myIndex;
      showButton();
    });
  });
  container.hover(stop, play);

  play();
  showButton();
});