xh_web/js/product.js

$(function () {
  $(".header_root").load("./comm/header.html");
  $(".footer_root").load("./comm/footer.html");
  //获取元素
  var divheight = $(".exam_one").height() - 70;
  var container = $(".exam_container");
  var list = $(".show_exam");
  var buts = $(".exam_item");
  var index = 1; //存放当前显示的图片的下标
  var imgnum = 3; // 图片数量
  var len = 1; //显示数量
  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 == 6) {
      index = 1;
      offset = 0;
      console.log("最后一个");
    }
    console.log("当前索引", index, top, offset);
    list.animate({ top: offset }, 300, function () {
      if (top > -200) {
      }
    });
  }
  //亮起小圆点
  function showButton() {
    console.log("亮起小圆点", index);
    //当前图片的小圆点亮起，其他小圆点不亮
    buts
      .eq(index - 1)
      .addClass("active")
      .siblings()
      .removeClass("active");
  }
  console.log(divheight);
  // 鼠标离开图片区域时，轮播继续
  function play() {
    console.log("鼠标离开");
    timer = setTimeout(function () {
      animate(divheight);
      play();
    }, interval);
  }

  //鼠标进入图片区域时，停止轮播
  function stop() {
    console.log("鼠标进入");
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }
  }
  // 点击事件
  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);
      showButton();
      stop();
    });
  });
  container.hover(stop, play);

  play();
});