http://hlbbiostep.com/child/js/main.js

1var reportSlide;
2var productThumbs;
3function reportEvent(){
4  var ww = $(window).width();
5
6  /*if (ww > 1025) {
7    console.log(ww);
8    reportSlide = new Swiper('.sec--report .swiper-container', {
9      slidesPerView:20,
10      spaceBetween:20,
11      initialSlide: 1,
12      loopedSlides: 20,
13      loop: true,
14      loopAdditionalSlides: 1,
15
16      centeredSlides: true,
17      centeredSlidesBounds: true,
18      speed :500,
19      autoplay: {
20        delay: 500,
21        disableOnInteraction: false,
22      },
23      navigation : {
24        nextEl : '.sec--report .swiper-button-next',
25        prevEl : '.sec--report .swiper-button-prev',
26      },
27      breakpoints: {
28        1025 : {
29          slidesPerView:3.5,
30          spaceBetween:12,
31
32        },
33        1201 :{
34          slidesPerView:4.5,
35          spaceBetween:20,
36        }
37      }
38    });
39  } else if (ww > 1201) {
40    reportSlide = new Swiper('.sec--report .swiper-container', {
41      slidesPerView:3.5,
42      spaceBetween:12,
43      initialSlide: 1,
44      loop: true,
45      loopAdditionalSlides: 1,
46      centeredSlides: true,
47      centeredSlidesBounds: true,
48      speed :500,
49      autoplay: {
50        delay: 500,
51        disableOnInteraction: false,
52      },
53      navigation : {
54        nextEl : '.sec--report .swiper-button-next',
55        prevEl : '.sec--report .swiper-button-prev',
56      },
57      breakpoints: {
58        1025 : {
59          slidesPerView:3.5,
60          spaceBetween:12,
61
62        },
63        1201 :{
64          slidesPerView:4.5,
65          spaceBetween:20,
66        }
67      }
68    });
69  } else {*/
70    reportSlide = new Swiper('.sec--report .swiper-container', {
71      slidesPerView:1.5,
72      spaceBetween:6,
73      initialSlide: 1,
74      loop: true,
75      loopAdditionalSlides: 1,
76      centeredSlides: true,
77      centeredSlidesBounds: true,
78      speed :500,
79      loopedSlides: 1.5,
80      autoplay: {
81        delay: 1500,
82        disableOnInteraction: false,
83      },
84      navigation : {
85        nextEl : '.sec--report .swiper-button-next',
86        prevEl : '.sec--report .swiper-button-prev',
87      },
88      breakpoints: {
89        1025 : {
90          slidesPerView:3.5,
91          spaceBetween:12,
92
93        },
94        1201 :{
95          slidesPerView:4.5,
96          spaceBetween:20,
97        },  1201 :{
98          slidesPerView:4.5,
99          spaceBetween:20,
100        }
101      }
102    });
103
104
105}
106function productEvent(){
107
108  productThumbs = new Swiper('.sec--product .swiper-container--thumb',{
109    slidesPerView:2,
110    spaceBetween:4,
111    slideToClickedSlide: true,
112    slideClickable: true,
113    loop: true,
114    loopedSlides: 4,
115    initialSlide: 6,
116    observer: true,
117    observeParents: true,
118    speed :500,
119    autoplay: {
120      delay: 1500,
121      disableOnInteraction: false,
122    },
123    pagination : {
124      el : '.sec--product .product-list--thumb .swiper-pagination',
125      clickable : true,
126    },
127    navigation : {
128      nextEl : '.sec--product .product-list--thumb .swiper-button-next',
129      prevEl : '.sec--product .product-list--thumb .swiper-button-prev',
130    },
131    breakpoints: {
132      769 : {
133        slidesPerView:3,
134        spaceBetween:6,
135      },
136      1025 : {
137        slidesPerView:4,
138        spaceBetween:12,
139      },
140    }
141  });
142
143  /*breakpoints: {
144    640 : {
145      slidesPerView:3,
146          spaceBetween:12,
147    },
148    1025 :{
149      slidesPerView:4,
150          spaceBetween:20,
151    },
152    1920:{
153      slidesPerView:6,
154          spaceBetween:20,
155    }
156  }*/
157
158  productThumbs.on('transitionEnd', function(){
159    console.log('now index :::', productThumbs.realIndex);
160  });
161
162
163  const productGallery = new Swiper('.sec--product .swiper-container--gallery',{
164    effect : 'fade',
165    allowTouchMove: false,
166    // loop: true,
167    // loopedSlides: 4,
168    thumbs: {
169      swiper: productThumbs
170    }
171  });
172
173  const productCon = new Swiper('.sec--product .swiper-container--con',{
174    effect : 'fade',
175    speed:600,
176    allowTouchMove: false,
177  });
178

179  productGallery.controller.control = productCon;
180  productCon.controller.control = productGallery;
181}
182window.addEventListener('load', function(){
183
184  // 회사소개 클릭 이벤트
185  function aboutEvent() {
186
187    let aboutLists = document.querySelectorAll('.sec--about .btns_list li');
188    let aboutImgs = document.querySelectorAll('.sec--about .img_list li');
189    let aboutBtns = document.querySelectorAll('.sec--about .btns_list .btns_list__btn');
190    let currentIndex = 0; // 현재 인덱스 초기화
191
192    // 초기로드시 첫 번째 li에 클래스 "on" 추가
193    aboutLists[0].classList.add('on');
194    aboutImgs[0].classList.add('on');
195
196    // 초기로드시 첫 번째 .btns_list__txt에 max-height 설정
197    let initialTxt = document.querySelector('.sec--about .btns_list .btns_list__btn:first-child').nextElementSibling;
198    let initialComputedStyles = window.getComputedStyle(initialTxt);
199    let marginTop = parseInt(initialComputedStyles.marginTop);
200    let marginBottom = parseInt(initialComputedStyles.marginBottom);
201    let anchor = initialTxt.querySelector('a');
202    let anchorStyles = window.getComputedStyle(anchor);
203    let anchorMarginTop = parseInt(anchorStyles.marginTop);
204    let anchorMarginBottom = parseInt(anchorStyles.marginBottom);
205    let totalHeight = initialTxt.scrollHeight + marginTop + marginBottom + anchorMarginTop + anchorMarginBottom + 20;
206    initialTxt.style.maxHeight = totalHeight + "px";
207
208    // 자동으로 다음 이미지 및 텍스트로 전환하는 함수
209    function autoSwitch() {
210      // 현재 항목 클래스 제거 및 max-height 초기화
211      aboutLists[currentIndex].classList.remove('on');
212      aboutImgs[currentIndex].classList.remove('on');
213      let currentTxt = aboutLists[currentIndex].querySelector('.btns_list__txt');
214      currentTxt.style.maxHeight = null;
215
216      // 다음 인덱스 계산
217      currentIndex = (currentIndex + 1) % aboutBtns.length;
218
219      // 다음 항목 클래스 추가 및 max-height 설정
220      aboutLists[currentIndex].classList.add('on');
221      aboutImgs[currentIndex].classList.add('on');
222      let nextTxt = aboutLists[currentIndex].querySelector('.btns_list__txt');
223      let computedStyles = window.getComputedStyle(nextTxt);
224      let marginTop = parseInt(computedStyles.marginTop);
225      let marginBottom = parseInt(computedStyles.marginBottom);
226      let anchor = nextTxt.querySelector('a');
227      let anchorStyles = window.getComputedStyle(anchor);
228      let anchorMarginTop = parseInt(anchorStyles.marginTop);
229      let anchorMarginBottom = parseInt(anchorStyles.marginBottom);
230      let totalHeight = nextTxt.scrollHeight + marginTop + marginBottom + anchorMarginTop + anchorMarginBottom + 20;
231      nextTxt.style.maxHeight = totalHeight + "px";
232    }
233

234    // 3초마다 자동으로 전환
235    const interval = setInterval(autoSwitch, 2000);
236
237    // 버튼 클릭 이벤트 리스너
238    aboutBtns.forEach((btn, i) => {
239      btn.addEventListener('click', function (e) {
240        e.preventDefault();
241
242        clearInterval(interval); // 자동 전환 중지
243
244        let parent = this.parentNode.parentNode;
245        let target = parent.querySelector('.btns_list__txt');
246        aboutBtns.forEach((otherBtn) => {
247          if (otherBtn !== btn) {
248            let otherParent = otherBtn.parentNode.parentNode;
249            let outerTarget = otherParent.querySelector('.btns_list__txt');
250            outerTarget.style.maxHeight = null;
251            otherParent.classList.remove('on');
252          }
253        });
254
255        if (!parent.classList.contains('on')) {
256          let computedStyles = window.getComputedStyle(target);
257          let marginTop = parseInt(computedStyles.marginTop);
258          let marginBottom = parseInt(computedStyles.marginBottom);
259          let anchor = target.querySelector('a');
260          let anchorStyles = window.getComputedStyle(anchor);
261          let anchorMarginTop = parseInt(anchorStyles.marginTop);
262          let anchorMarginBottom = parseInt(anchorStyles.marginBottom);
263          let imgList = document.querySelector('.sec--about .img_list');
264
265          if (!imgList.classList.contains('active')) {
266            imgList.classList.add('active');
267          }
268
269          aboutImgs.forEach((img) => {
270            img.classList.remove('on');
271          });
272
273          aboutImgs[i].classList.add('on');
274
275          let totalHeight = target.scrollHeight + marginTop + marginBottom + anchorMarginTop + anchorMarginBottom + 20;
276          target.style.maxHeight = totalHeight + "px";
277
278          parent.classList.add('on');
279        }
280      });
281    });
282
283  }
284
285  aboutEvent();
286
287
288  // 유효성 평가 시험 스와이프
289
290
291  reportEvent();
292
293
294  // 주요 진단 장비 스와이프
295
296
297  productEvent();
298
299
300  // 파트너사 이벤트
301  function partnerEvent(){
302    let tabList = document.querySelectorAll('.sec--partner .btns_list > li');
303    let tabCon = document.querySelectorAll('.sec--partner .item_list >  li');
304
305    if(tabList){
306      tabList.forEach((list,i) => {
307        list.addEventListener('click', function(e){
308
309          tabList.forEach((current) => {
310            current.classList.remove('on');
311          });
312
313          tabCon.forEach((current) => {
314            current.classList.remove('on');
315          })
316
317          list.classList.add('on');
318          tabCon[i].classList.add('on');
319
320        });
321      });
322    }
323  }
324
325  partnerEvent();
326
327},false);
328
329/*
330
331window.addEventListener('resize', function () {
332  if (timer) {
333    clearTimeout(timer);
334  }
335  timer = setTimeout(function () {
336    reportSlide.destroy();
337    productThumbs.destroy();
338    reportEvent();
339
340    productEvent();
341  }, 200);
342
343
344
345});
346
347*/
348
349
350function setCookie(key, value, expiredays) {
351  var todayDate = new Date();
352  todayDate.setDate(todayDate.getDate() + expiredays);
353  document.cookie = key + "=" + escape(value) + "; path=/; expires=" + todayDate.toGMTString() + ";"
354}
355function getCookie(key) {
356  var result = null;
357  var cookie = document.cookie.split(';');
358  cookie.some(function (item) {
359    // 공백을 제거
360    item = item.replace(' ', '');
361
362    var dic = item.split('=');
363
364    if (key === dic[0]) {
365      result = dic[1];
366      return true;    // break;
367    }
368  });
369  return result;
370}
371/* Popup Event */
372function popupClose(seq){
373  // var popupLayer = document.querySelector('.popup-layer');
374  // console.log(popupLayer);
375
376  var value = $('#popup-close_'+seq).val();
377
378  setCookie(seq,value,1);
379
380  $("#popup_"+seq).hide();
381
382}
383
384/* Popup Event */
385function popupClose2(seq){
386  // var popupLayer = document.querySelector('.popup-layer');
387  // console.log(popupLayer);
388
389
390  $("#popup_"+seq).hide();
391
392}