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 exam_slide = $(".exam_slide"); //右侧图片
  var list = $(".show_exam");
  var buts = $(".exam_item");
  var index = 0; //存放当前显示的图片的下标
  var beforeidx = 0; //之前的索引
  var interval = 5000; //位移时间间隔
  var timer;
  var blue = $(".blue");
  var grey = $(".grey");
  function showimg(index) {
    $.each(exam_slide, (idx, item) => {
      if (index != idx) {
        //隐藏
        setTimeout(() => {
          exam_slide.eq(idx).css("visibility", "hidden");
        }, 500);
      } else {
        //显示当前索引图片
        // exam_slide.eq(idx).css("visibility", "visible");
        setTimeout(() => {
          exam_slide.eq(idx).css("visibility", "visible");
        }, 500);
      }
    });
  }
  function animate(offset, type) {
    if (!type) {
      //自动轮播
      showimg(index);
      beforeidx = index;
      index++;
      offset = "-=" + Math.abs(offset);
      if (index == 5) {
        index = 0;
        offset = 0;
      }

      showButton();
    } else {
      showimg(beforeidx);
      console.log("显示上一张图片");
    }
    if (index > beforeidx) {
      console.log("从下往上滚");
      exam_slide
        .eq(beforeidx)
        .addClass("flip-scale-down-hor")
        .siblings("div")
        .removeClass("flip-scale-down-hor");
    } else {
      console.log("从上往下滚");
      exam_slide
        .eq(beforeidx)
        .addClass("flip-scale-up-hor")
        .siblings("div")
        .removeClass("flip-scale-up-hor");
    }
    console.log("当前索引", index, "上一个索引", beforeidx);
    //

    setTimeout(() => {
      showimg(index);
      exam_slide
        .eq(index)
        .addClass("flip-scale-up-hor")
        .siblings("div")
        .removeClass("flip-scale-up-hor");
      console.log("显示当前图片");
      if (index > beforeidx) {
        // exam_slide
        //   .eq(index)
        //   .addClass("flip-scale-up-hor")
        //   .siblings("div")
        //   .removeClass("flip-scale-up-hor");
      } else {
        // exam_slide
        //   .eq(index)
        //   .addClass("flip-scale-down-hor")
        //   .siblings("div")
        //   .removeClass("flip-scale-down-hor");
      }
    }, 500);
    if (type) {
      beforeidx = index;
    }
  }
  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("div").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 () {
      //移入
      var myIndex = parseInt($(this).attr("index"));
      if (myIndex == index) {
        return;
      }
      $.each(grey, function (idx, item) {
        $(this).show();
      });
      $.each(blue, function (idx, item) {
        if (idx == myIndex) {
          $(this).show();
        } else {
          $(this).hide();
        }
      });
      index = myIndex;
      animate(divheight, 1);
    },
    mouseleave: function () {}
  });
  // 回到顶部
  $(".top").on("click", function () {
    $("html,body").animate({
      scrollTop: 0
    });
  });
  // container.hover(stop, play);

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