xh_web/js/product.js

$(function () {
  $(".header_root").load("./comm/header.html");
  $(".footer_root").load("./comm/footer.html");
  // nav传值显示下划线
  $(".header_root").data("nav_info", 1);
  //获取元素
  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();

  //楼梯导航
  $(window).on("scroll", function () {
    var $scroll = $(this).scrollTop();
    // 拖动滚轮，点亮对应的楼层标签
    $(".piece").each(function () {
      var $stepTop = $(".piece").eq($(this).index()).offset().top;
      // 楼层的top大于滚动条的距离
      if ($stepTop > $scroll) {
        $(".step").removeClass("active");
        $(".step").eq($(this).index()).addClass("active");
        // 中断循环
        return false;
      }
    });
  });

  // 获取每个楼梯的offset().top，点击楼层让对应的内容模块移动到对应的位置
  var $stepItem = $(".step");
  $stepItem.on("click", function () {
    $(this).addClass("active").siblings("li").removeClass("active");
    var $stepTop = $(".piece")
      .eq($(this).index() - 1)
      .offset().top;
    // 获取每个楼梯的offsetTop值
    $("html,body").animate({
      scrollTop: $stepTop
    });
  });

  // 回到顶部
  $(".top").on("click", function () {
    $("html,body").animate({
      scrollTop: 0
    });
  });
});