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;
  var blue = $(".blue");
  var grey = $(".grey");
  function animate(offset, type) {
    var top = parseInt(list.css("top")) + offset;
    // console.log(list.css("top"));
    var absnum = Math.abs(offset);
    index++;
    offset = "-=" + Math.abs(offset);
    if (index == 5) {
      index = 0;
      offset = 0;
    }
    if (!type) {
      showButton();
    }
    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() {
    buts.each(function (idx, item) {
      var curindex = JSON.parse(JSON.stringify(index));
      if (idx == index) {
        blue.eq(index).show();
      } else {
        curindex--;
        if (curindex == -1) 4;
        blue.eq(curindex).hide();
        grey.eq(curindex).show();
      }
    });
  }
  // 鼠标离开图片区域时，轮播继续
  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();
    });
  });

  //楼梯导航
  $(window).on("scroll", function () {
    var $scroll = $(this).scrollTop() - 200;
    // 拖动滚轮，点亮对应的楼层标签
    $(".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
    });
  });

  $.each(blue, function (idx, item) {
    if (idx != 0) {
      $(this).hide();
    }
  });
  buts.on({
    mouseenter: function () {
      //移入
      $.each(blue, function (idx, item) {
        $(this).hide();
      });
      var myIndex = parseInt($(this).attr("index"));
      blue.eq(myIndex).show();
      index = myIndex;
      animate(divheight, 1);
      console.log("移入当前索引", myIndex);
    },
    mouseleave: function () {
      //移出
      var myIndex = parseInt($(this).attr("index"));
      if (myIndex != 0 && myIndex != 4) {
        console.log(123);
        blue.eq(myIndex).hide();
        grey.eq(myIndex).show();
      }

      console.log("移出当前索引", myIndex);
    }
  });
  // 回到顶部
  $(".top").on("click", function () {
    $("html,body").animate({
      scrollTop: 0
    });
  });
  container.hover(stop, play);

  play();
  showButton();
});