http://ancamera.co.kr/home/js/jquery.banner.js

1$(function() {
2    var f_nBnrCnt = 0; // jQBanner를 사용해서 화면에 출력되는 베너수
3
4    $.f_varBanner = {
5        defaults: {
6            /* 내부적으로 쓰이는 변수 */
7            objScr: null,   // 스크린 영역
8            objBtn: null, // 버튼 영역
9            objTimer: null, // 타이머
10            nOrderNo: 999, // 현재 선택된 레이어
11            nOrderNoBtn: -1, // 버튼 선택시 레이어
12
13            /* 초기세팅이 가능한  필수 변수 */
14            nWidth: 0, // 베너 스크린 영역 폭
15            nHeight: 0, // 베너 스크린 영역 높이
16            nCount: 0, // 베너 스크린 영역에 속해있는 레이어의 수
17            isActType: "none",  // 베너 액션 타입 none,left,right,up,down,fade,page
18
19            /* 초기세팅이 가능한  옵션 변수 */
20            isShuffle: "N", // 베너 레이어들의 셔플 여부 Y:셔플,N:순차적
21            isBtnAct: "mouseover",  // 버튼 작동방식 mouseover,click
22            isBtnType: "img", // 버튼 타입 img,li           
23            nStartUp: 300, // 스타트 시 첫 레이어의 FadeIn 속도
24            nDelay: 5000, // 딜레이
25            nSpeed: 500, // 액션시의 속도
26            nSpeedFade: 300, // 페이드 관련 액션에서 버튼 작동시 속도의 교정값 [되도록 고정]
27            isStartFade:"Y", // 스타트 FadeIn 효과 여부 [프로그램으로 스크린을 Display:block 처리할 경우 사용]
28            isStartDelay:"N" // 스타트시 딜레이를 가지고 실행 [무거운 페이지의 경우 딜레이를 가지고 초기화]
29        }
30    };
31
32    $.fn.jQBanner = function(defaults){
33	    var config = $.extend({}, $.f_varBanner.defaults, defaults);
34        var isIEChk = jsBrowserCheck();
35
36        config.objScr = "#"+this.attr("id")+" .clsBannerScreen";
37        config.objBtn = "#"+this.attr("id")+" .clsBannerButton";
38        
39        if (config.isStartDelay=="Y" && isIEChk==true) {
40            /* 스타트 딜레이 처리 */
41            if (f_nBnrCnt>=0 && f_nBnrCnt<=3) {
42                setTimeout( function(){jsBanInit(config)}, f_nBnrCnt*100);
43            } else if (f_nBnrCnt>3 && f_nBnrCnt<=6) {
44                setTimeout( function(){jsBanInit(config)}, f_nBnrCnt*200);
45            } else if (f_nBnrCnt>6 && f_nBnrCnt<=10) {
46                setTimeout( function(){jsBanInit(config)}, f_nBnrCnt*300);
47            } else if (f_nBnrCnt>10) {
48                setTimeout( function(){jsBanInit(config)}, 400);
49            }
50            f_nBnrCnt++;
51        } else {
52            jsBanInit(config);
53        }
54
55        return this;
56    };
57
58    function jsBanInit(config) {
59        var nPosFix;
60
61        /* 베너 스크린 CSS 설정 */
62        $(config.objScr).css({'position':'relative','height':config.nHeight+'px','width':config.nWidth+'px','overflow':'hidden'});
63        
64        /* 첫 레이어 선택 */
65        config.nOrderNo = (config.nOrderNo==999) ? Math.floor(Math.random() * config.nCount):config.nOrderNo-1;
66
67        /* 액션 타입에 따른 초기 세팅 */
68        if (config.isActType == "left") {
69            $(config.objScr+" div").each(function(i){
70                nPosFix = (config.nOrderNo==i)?0:config.nWidth;
71                $(this).css({'position':'absolute','top':'0','left':(-1*nPosFix)+'px'});
72                if (!(config.nOrderNo==i && config.isStartFade=="N")) {
73                    $(this).fadeIn(config.nStartUp);
74                }
75                $(this).attr("divno",i);
76            });
77        } else if (config.isActType == "right") {
78            $(config.objScr+" div").each(function(i){
79                nPosFix = (config.nOrderNo==i)?0:config.nWidth;             
80                $(this).css({'position':'absolute','top':'0','left':nPosFix+'px'});
81                if (!(config.nOrderNo==i && config.isStartFade=="N")) {
82                    $(this).fadeIn(config.nStartUp);
83                }
84                $(this).attr("divno",i);
85            });
86        } else if (config.isActType == "up") {
87            $(config.objScr+" div").each(function(i){
88                nPosFix = (config.nOrderNo==i)?0:config.nHeight;
89                $(this).css({'position':'absolute','top':(-1*nPosFix)+'px','left':'0'});
90                if (!(config.nOrderNo==i && config.isStartFade=="N")) {
91                    $(this).fadeIn(config.nStartUp);
92                }
93                $(this).attr("divno",i);
94            });
95        } else if (config.isActType == "down") {
96            $(config.objScr+" div").each(function(i){
97                nPosFix = (config.nOrderNo==i)?0:config.nHeight;
98                $(this).css({'position':'absolute','top':nPosFix+'px','left':'0'});
99                if (!(config.nOrderNo==i && config.isStartFade=="N")) {
100                    $(this).fadeIn(config.nStartUp);
101                }
102                $(this).attr("divno",i);
103            });
104        } else if (config.isActType == "fade") {
105            $(config.objScr+" div").each(function(i){
106                if (config.nOrderNo==i) {
107                    nPosFix = 0;
108                    if (!(config.nOrderNo==i && config.isStartFade=="N")) {
109                        $(this).fadeIn(config.nStartUp);
110                    }
111                } else {
112                    nPosFix = config.nWidth;
113                }
114                $(this).css({'position':'absolute','top':'0','left':nPosFix+'px'});
115                $(this).attr("divno",i);
116            });
117        } else if (config.isActType == "page") {
118            $(config.objScr+" div").each(function(i){
119                nPosFix = (config.nOrderNo==i)?0:config.nHeight;
120                $(this).css({'position':'absolute','top':nPosFix+'px','left':'0'});
121                if (!(config.nOrderNo==i && config.isStartFade=="N")) {
122                    $(this).fadeIn(config.nStartUp);
123                }
124                $(this).attr("divno",i);
125            });
126        } else if (config.isActType == "none") {
127            $(config.objScr+" div").each(function(i){
128                if (config.nOrderNo==i) {
129                    nPosFix = 0;
130                    if (!(config.nOrderNo==i && config.isStartFade=="N")) {
131                        $(this).fadeIn(config.nStartUp);
132                    }
133                } else {
134                    nPosFix = config.nWidth;
135                }
136                $(this).css({'position':'absolute','top':'0','left':nPosFix+'px'});
137                $(this).attr("divno",i);
138            });
139        }
140
141        /* 버튼 순번 설정 */
142        $(config.objBtn+" "+config.isBtnType).each(function(i){ $(this).attr("btnno",i); $(this).css("cursor","hand") });
143
144        /* 버튼 바인드 */
145        jsBanBtnBind(config);
146        
147        /* 스크린 pause 바인드 */
148        jsScrPauseBind(config);
149
150        /* 베너 타이머 등록 및 액션 시작!!!! */
151        if (config.isActType != "none" && config.isActType != "page") {
152            config.objTimer = setTimeout( function(){jsBanTimer(config)}

152, config.nDelay);
153        }
154    };
155
156    /* 배너 타이머 */
157    function jsBanTimer(config) {
158        /* 버튼 액션 순번의 초기화 */
159        config.nOrderNoBtn = -1;
160
161        jsBanAction(config);
162        config.objTimer = setTimeout( function(){jsBanTimer(config)}, config.nDelay);
163    };
164
165    /* 배너 액션 처리 */
166    function jsBanAction(config) {
167        var nPageSel;
168        var nSpeed = config.nSpeed;
169        var nDivNoSel = config.nOrderNo;
170        var nOrderNext = (config.nOrderNo+1)%(config.nCount);
171
172        /* 'page' 액션일 경우 선택페이지 추출 */
173        if (config.isActType == "page") {
174            var nOrderMinus = config.nOrderNoBtn-config.nOrderNo;
175            nPageSel = (nOrderMinus==1 || (nOrderMinus==(config.nCount-1)*-1)) ? 1 : 0;
176        }   
177
178        if (config.nOrderNoBtn >= 0) {
179            config.nOrderNo = config.nOrderNoBtn;
180            nOrderNext = config.nOrderNoBtn;
181            nSpeed = (config.isActType=="fade" || config.isActType=="page" || config.isActType=="none") ? config.nSpeedFade : 0;
182        } else {
183            config.nOrderNo = ((config.nCount-1)==config.nOrderNo) ? nOrderNext : config.nOrderNo+1;
184        }
185
186        var nDivNoNext = nOrderNext;
187
188        var objSelObj = $(config.objScr+" div[divno='"+nDivNoSel+"']");
189        var objNextObj = $(config.objScr+" div[divno='"+nDivNoNext+"']");
190
191        /* 액션에 의한 버튼 선택 */
192        if (config.isActType != "page") {
193            jsBanBtnRO(config,nOrderNext);
194        }
195
196        /* 실제 스크린 레이어들의 동작 처리 */
197        if (config.isActType == "left") {
198            objNextObj.css('left',(config.nWidth)+'px');
199            objSelObj.animate({'left':(-1*config.nWidth)+'px'},nSpeed);
200            objNextObj.animate({'left':'0'},nSpeed);
201        } else if (config.isActType == "right") {
202            objNextObj.css('left',(-1*config.nWidth)+'px');
203            objSelObj.animate({'left':config.nWidth+'px'},nSpeed);
204            objNextObj.animate({'left':'0'},nSpeed);
205        } else if (config.isActType == "up") {
206            objNextObj.css('top',config.nHeight+'px');
207            objSelObj.animate({'top':(-1*config.nHeight)+'px'},nSpeed);
208            objNextObj.animate({'top':'0'},nSpeed);
209        } else if (config.isActType == "down") {
210            objNextObj.css('top',(-1*config.nHeight)+'px');
211            objSelObj.animate({'top':config.nHeight+'px'},nSpeed);
212            objNextObj.animate({'top':'0'},nSpeed);
213        } else if (config.isActType == "fade") {
214            objSelObj.css({'left':config.nWidth+'px','display':'none'});
215            objNextObj.css('left','0');
216            objNextObj.fadeIn(nSpeed);
217        } else if (config.isActType == "page") {
218            if (nPageSel == 0) {
219                objNextObj.css({'top':'0','left':config.nWidth+'px'});
220                objSelObj.animate({'left':(-1*config.nWidth)+'px'},nSpeed);
221                objNextObj.animate({'left':'0'},nSpeed);
222            } else if (nPageSel == 1) {
223                objNextObj.css({'top':'0','left':(-1*config.nWidth)+'px'});
224                objSelObj.animate({'left':config.nWidth+'px'},nSpeed);
225                objNextObj.animate({'left':'0'},nSpeed);
226            }
227        } else if (config.isActType == "none") {
228            objSelObj.css({'left':config.nWidth+'px','display':'none'});
229            objNextObj.css('left','0');
230            objNextObj.fadeIn(nSpeed);
231        }
232    }
233
234    /* 스크린 pause 바인드 */
235    function jsScrPauseBind(config) {
236        /* 스크린에 대한 처리 */
237        $(config.objScr).mouseover(function(){
238            clearTimeout(config.objTimer);
239        });
240        $(config.objScr).mouseout(function(){
241            if (config.isActType != "none" && config.isActType != "page") {
242                config.objTimer = setTimeout( function(){jsBanTimer(config)}, config.nDelay);
243            }
244        });     
245    }
246    
247    /* 버튼 바인드 */
248    function jsBanBtnBind(config) {
249        /* 초기 버튼 설정 */
250        if (config.isActType != "page") {
251            jsBanBtnRO(config,config.nOrderNo);
252        }
253        
254        /* 버튼에 대해 마우스 오버일 경우 처리 */
255        if (config.isBtnAct=="mouseover") {
256            /* 버튼에 대한 처리 */
257            $(config.objBtn+" "+config.isBtnType).mouseover(function(){
258                var nImgNo = $(this).attr("btnno");
259
260                if (config.isActType != "none" && config.isActType != "page") {
261                    clearTimeout(config.objTimer);
262                }
263
264                if (config.isActType == "page") {
265                    if (nImgNo == 0) {
266                        config.nOrderNoBtn = ((config.nOrderNo-1)<0) ? config.nCount-1 : config.nOrderNo-1;
267                    } if (nImgNo == 1) {
268                        config.nOrderNoBtn = ((config.nOrderNo+1)==config.nCount) ? (config.nOrderNo+1)%config.nCount : config.nOrderNo+1;
269                    }
270                    jsBanBtnRO(config,nImgNo);
271                } else {
272                    config.nOrderNoBtn = parseInt(nImgNo);
273                }
274
275                jsBanAction(config);
276            });
277            $(config.objBtn+" "+config.isBtnType).mouseout(function(){
278                if (config.isActType != "none" && config.isActType != "page") {
279                    config.objTimer = setTimeout( function(){jsBanTimer(config)}

279, config.nDelay);
280                }
281            });
282
283        /* 버튼에 대해 클릭일 경우 처리 */
284        } else if (config.isBtnAct=="click") {
285            $(config.objBtn+" "+config.isBtnType).click(function(){
286                var nImgNo = $(this).attr("btnno");
287                
288                if (config.isActType != "none" && config.isActType != "page") {
289                    clearTimeout(config.objTimer);
290                }
291
292                if (config.isActType == "page") {
293                    if (nImgNo == 0) {
294                        config.nOrderNoBtn = ((config.nOrderNo-1)<0) ? config.nCount-1 : config.nOrderNo-1;
295                    } if (nImgNo == 1) {
296                        config.nOrderNoBtn = ((config.nOrderNo+1)==config.nCount) ? (config.nOrderNo+1)%config.nCount : config.nOrderNo+1;
297                    }
298                    jsBanBtnRO(config,nImgNo);
299                } else {
300                    config.nOrderNoBtn = parseInt(nImgNo);
301                }
302                
303                jsBanAction(config);
304
305                if (config.isActType != "none" && config.isActType != "page") {
306                    config.objTimer = setTimeout( function(){jsBanTimer(config)}, config.nDelay);
307                }
308            });
309        }
310    };
311
312    /* 버튼 롤오버 처리 */
313    function jsBanBtnRO (config,nSel) {
314        if (config.isBtnType=="img") {
315            $(config.objBtn+" img").each(function(i){
316                if (nSel==i) {
317                    $(this).attr("src",$(this).attr("oversrc"));
318                } else {
319                    $(this).attr("src",$(this).attr("outsrc"));
320                }
321            });
322            
323        } else if (config.isBtnType=="li") {
324            $(config.objBtn+" li").each(function(i){
325                if (nSel==i) {
326                    $(this).attr("class",$(this).attr("overclass"));
327                } else {
328                    $(this).attr("class",$(this).attr("outclass"));
329                }
330            });
331            
332        }
333    }
334
335    /* IE 체크 */
336    function jsBrowserCheck() {
337        appname = navigator.appName;
338        useragent = navigator.userAgent;
339    
340        if(appname == "Microsoft Internet Explorer") appname = "IE";
341        IE55 = (useragent.indexOf('MSIE 5.5')>0);  //5.5 버전
342        IE6 = (useragent.indexOf('MSIE 6')>0);     //6.0 버전
343        IE7 = (useragent.indexOf('MSIE 7')>0);     //7.0 버전
344        IE8 = (useragent.indexOf('MSIE 8')>0);     //8.0 버전
345    
346        if(appname=="IE" && IE55 || IE6 || IE7 || IE8){
347            return true
348        }else{
349            return false; 
350        }
351    }   
352});