https://www.uljin.go.kr/js/02_tour/common-popup.js

1function popzone(param,btn,obj,auto,f,s,p,h){
2	var param = $(param);
3	var btn = param.find(btn);
4	var obj = param.find(obj);
5
6	var stop = btn.find("[data-type=stop]");
7	var play = btn.find("[data-type=play]");
8
9	var returnNodes; // 버튼 이벤트를 위해 반복 명령 받아두기
10	var elem = 0;
11	var fade = f;
12	var speed = s;
13	var data = "";
14
15	// setup
16	obj.hide().eq(0).show();
17
18	//페이징
19	if(p.use==true){
20		var target = param.find(p.path);
21		target.html("");
22
23		if(p.type == null){
24			$.each(obj,function(e){
25				target.append('<button class="ir" type="button">'+(e+1)+'</button>\n');
26			});
27			var pbtn = target.find("button");
28
29			pbtn.not(elem).removeClass("ov").eq(elem).addClass("ov");
30			pbtn.on("click",function(event){
31				clearInterval(returnNodes);
32				var t = $(this);
33				elem = t.index();
34				pbtn.not(elem).removeClass("ov").eq(elem).addClass("ov");
35				obj.not(elem).stop(false,true).fadeOut(f/2).eq(elem).stop(false,true).fadeIn(f/2);
36				stop.css({'display':'none'});
37				play.css({'display':'inline-block'});
38				event.preventDefault();
39			});
40		}
41
42		if(p.type == 1){
43			target.html("<i>"+(elem+1)+"</i>/"+obj.length);
44		}
45	}
46
47	function init(n){
48		if(data == "prev"){
49			if(elem != 0) elem--; else elem = obj.length-1;	 
50		}else{
51			if(elem<obj.length-1) elem++; else elem = 0;
52		}		
53
54		if(p.use==true){
55			if(p.type == null) pbtn.not(elem).removeClass("ov").eq(elem).addClass("ov");
56			if(p.type == 1) target.children().text(elem+1);
57		}
58
59		obj.not(elem).stop(true,true).fadeOut(n).eq(elem).stop(true,true).fadeIn(n);
60	}
61
62	function rotate(){ returnNodes = setInterval(function(){ init(f); },speed); } // 초단위 반복
63
64	if(h==true) play.hide();
65	if(obj.length <= 1 ){
66		// 팝업 갯수가 하나면 컨트롤을 지우고 실행하지않습니다.
67		btn.hide();
68		return false;
69	}
70
71	if(auto != false) rotate();
72	
73	// 포커스 들어오면 멈춤
74	obj.children().on("focusin",function(){
75		clearInterval(returnNodes);
76	});
77
78	// 멈춤
79	btn.find("[data-type=stop]").on("click",function(event){
80		clearInterval(returnNodes);
81		if(h==true){
82			stop.css({'display':'none'});
83			play.css({'display':'inline-block'});
84		}
85		event.preventDefault();
86	});
87	
88	// 시작
89	btn.find("[data-type=play]").on("click",function(event){
90		clearInterval(returnNodes);
91		if(h==true){
92			play.css({'display':'none'});
93			stop.css({'display':'inline-block'});
94		}
95		rotate();
96		event.preventDefault();
97	});
98	
99	// 이전
100	btn.find("[data-type=prev]").on("click",function(event){
101		clearInterval(returnNodes);
102		data = "prev";
103		init(f/2);
104		if(h==true){
105			stop.css({'display':'none'});
106			play.css({'display':'inline-block'});
107		}
108		event.preventDefault();
109	});
110	
111	// 다음
112	btn.find("[data-type=next]").on("click",function(event){
113		clearInterval(returnNodes);
114		data = "next";
115		init(f/2);
116		if(h==true){
117			stop.css({'display':'none'});
118			play.css({'display':'inline-block'});
119		}
120		event.preventDefault();
121	});
122
123
124	// 터치 이벤트  플리킹 구현
125	var xStartpoint,xEndpoint;
126
127	function docSTART(event){
128		if(event.originalEvent.changedTouches != undefined){
129			xStartpoint = Math.floor(event.originalEvent.changedTouches[0].clientX - $(this).offset().left);
130		}
131	}
132
133	function docEND(event){
134		if(event.originalEvent.changedTouches != undefined){
135			xEndpoint = Math.floor(event.originalEvent.changedTouches[0].clientX - $(this).offset().left) - xStartpoint;
136		
137			if(xEndpoint < -50){ 
138				data = "next";
139			}else if(xEndpoint > 50){
140				data = "prev";
141			}else{
142				return true;
143			} 
144
145			clearInterval(returnNodes);
146			init(f/2);
147			if(h==true){
148			stop.css({'display':'none'});
149			play.css({'display':'inline-block'});
150			}
151
152			event.preventDefault();
153		}
154	}
155
156	param.on("touchstart",docSTART);
157	param.on("touchend",docEND);
158}