123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138 |
- $(function () {
- $(".header_root").load("./comm/header.html");
- $(".footer_root").load("./comm/footer.html");
-
- $(".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;
-
- var absnum = Math.abs(offset);
- index++;
-
-
-
-
-
-
-
- offset = "-=" + Math.abs(offset);
- if (index == 5) {
- index = 0;
- offset = 0;
- }
- 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() {
- 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;
-
- if ($stepTop > $scroll) {
- $(".step").removeClass("active");
- $(".step").eq($(this).index()).addClass("active");
-
- return false;
- }
- });
- });
-
-
- var $stepItem = $(".step");
- $stepItem.on("click", function () {
- $(this).addClass("active").siblings("li").removeClass("active");
- var $stepTop = $(".piece")
- .eq($(this).index() - 1)
- .offset().top;
-
- $("html,body").animate({
- scrollTop: $stepTop
- });
- });
-
-
- $(".top").on("click", function () {
- $("html,body").animate({
- scrollTop: 0
- });
- });
- });
|