https://www.haein.com/js/main.js

1/* *******************************************************
2 * filename : main.js
3 * description : 메인에만 사용되는 JS
4 * date : 2017-05-30
5******************************************************** */
6
7
8jQuery(function($){
9	/* *********************** 메인 비주얼 ************************ */
10	// 임의의 영역을 만들어 스크롤바 크기 측정
11	function getScrollBarWidth(){
12		if($(document).height() > $(window).height()){
13			$('body').append('<div id="fakescrollbar" style="width:50px;height:50px;overflow:hidden;position:absolute;top:-200px;left:-200px;"></div>');
14			fakeScrollBar = $('#fakescrollbar');
15			fakeScrollBar.append('<div style="height:100px;">&nbsp;</div>');
16			var w1 = fakeScrollBar.find('div').innerWidth();
17			fakeScrollBar.css('overflow-y', 'scroll');
18			var w2 = $('#fakescrollbar').find('div').html('html is required to init new width.').innerWidth();
19			fakeScrollBar.remove();
20			return (w1-w2);
21		}
22		return 0;
23	}
24
25	// 메인 비주얼 높이값 설정
26	$("#mainVisual.full-height").each(function  () {
27		scrollWidth = getScrollBarWidth();
28		var win_width = $(window).outerWidth() + getScrollBarWidth();
29		var visual_height = $(window).height()	- $("#productQuickMenuCon").height();
30		
31		
32		if ( win_width > 800 ) {
33			$("#mainVisual").height(visual_height);
34		}else {
35			$("#mainVisual").css("height","auto");
36		}
37		$(window).resize(function  () {
38			var win_width = $(window).outerWidth() + getScrollBarWidth();
39
40			var visual_height = $(window).height()	- $("#productQuickMenuCon").height();
41
42			if ( win_width > 800 ) {
43				$("#mainVisual").height(visual_height);
44			}else {
45				$("#mainVisual").css("height","auto");
46			}
47		});
48	});
49	var $mainVisual = $(".main-visual-con");
50
51	// 메인 비주얼 zoom-out 효과
52	$mainVisual.on('init', function(event, slick) {
53		$(".main-visual-item").eq(0).addClass("active-item");
54	});
55	$mainVisual.on('afterChange', function(event, slick, currentSlide){
56        $(".main-visual-item").removeClass("active-item");
57		$(this).find(".main-visual-item").eq(currentSlide).addClass("active-item")
58    });
59
60	// 메인 비주얼 슬라이드
61	$('.main-visual-con').slick({
62		slidesToShow: 1,
63		slidesToScroll: 1,
64		arrows: false,
65		fade: true,
66		dots:true,
67		autoplay: true,
68		speed:2000,
69		infinite:true,
70		autoplaySpeed: 4000,
71		easing: 'easeInOutQuint',
72		pauseOnHover:false
73	});
74	
75	/* *********************** 메인 NEWS ************************ 
76	// 메인 뉴스 슬라이드
77	var $mainNews = $(".main-news-container");
78
79	$mainNews.slick({
80		slidesToShow: 2,
81		slidesToScroll: 2,
82		arrows: false,
83		fade: false,
84		dots:false,
85		autoplay: false,
86		speed:1000,
87		infinite:true,
88		autoplaySpeed: 4000,
89		easing: 'easeInOutQuint',
90		pauseOnHover:false,
91		responsive: [
92			{
93				breakpoint: 1601,
94				settings: {
95					slidesToShow: 1,
96					slidesToScroll: 1
97				}
98			},
99			{
100				breakpoint: 1221,
101				settings: {
102					slidesToShow: 2,
103					slidesToScroll: 2
104				}
105			},
106			{
107				breakpoint: 481,
108				settings: {
109					slidesToShow: 1,
110					slidesToScroll: 1
111				}
112			}
113		]
114	});
115	$(".main-news-top-con .main-news-prev-btn").click(function  () {
116		$mainNews.slick("slickPrev");
117	});
118	$(".main-news-top-con .main-news-next-btn").click(function  () {
119		$mainNews.slick("slickNext");
120	});*/
121	
122
123	/* *********************** 메인 History ************************ 
124	// 메인 연혁 슬라이드
125	var $mainHistory = $(".main-history-list-con > ul");
126
127	$mainHistory.slick({
128		slidesToShow: 6,
129		slidesToScroll: 1,
130		arrows: false,
131		fade: false,
132		dots:false,
133		autoplay: true,
134		speed:1000,
135		infinite:true,
136		autoplaySpeed: 4000,
137		easing: 'easeInOutQuint'
138	})*/
139
140	/* *********************** 메인 History ************************ */
141	$(".main-history-list-con.pc > ul").each(function  (index) {
142		var $historyList = $(this);
143		var $historyItem = $historyList.children("li");
144		var historyLength = $historyItem.length;
145		var startNum = 0;
146		var rollingSpeed = 4000;
147		
148		function visualTime(){
149			if(startNum < ( historyLength - 1)){
150				startNum++;
151			}else{
152				startNum = 0;
153			}
154			visualPlay();
155		}
156		function visualPlay(){
157			$historyItem.each(function(id){
158					if(id == startNum){
159						$(this).addClass("active");
160					}else{
161						$(this).removeClass("active");
162					}
163			});
164		};
165
166		visualPlay();
167		var visual_timer = setInterval(visualTime,rollingSpeed);
168
169		$historyItem.each(function(index){
170			$(this).click(function(){
171				clearInterval(visual_timer);
172				startNum = index;
173				visualPlay();
174				visual_timer = setInterval(visualTime,rollingSpeed);
175				return false;

176			});
177		});
178	});
179
180
181	$(".main-history-list-con.m > ul").slick({
182		slidesToShow: 5,
183		slidesToScroll: 1,
184		arrows: true,
185		fade: false,
186		dots:false,
187		autoplay: true,
188		speed:1000,
189		infinite:false,
190		autoplaySpeed: 4000,
191		easing: 'easeInOutQuint',
192		centerMode:true,
193		focusOnSelect: true,
194		centerPadding: '0px',
195		responsive: [
196			{
197				breakpoint: 801,
198				settings: {
199					slidesToShow: 3,
200					slidesToScroll: 1
201				}
202			}
203		]
204	});
205});