https://www.hanbiton.com/js/slider.js

1/* ----------------------------------------------
2 * HanbitSoft Service Development Team
3 * RGSlider v1.0 JavaScript
4 * Author - [email protected] 20160520
5 ------------------------------------------------- */
6
7//제이쿼리 슬라이드 라이브러리
8var Slider = (function(){
9    function Slider(container, options){
10        this.container = $(container);
11        this.settings = {
12            type : 'default', // 배너타입 : default(기본) / fade(페이드인아웃) / slide(슬라이드) / complex(복합)
13            direction : 'horizontal', // 슬라이드 방향 : horizontal(왼쪽에서 오른쪽) / vertical(위에서 아래)
14            time : 3500, // 시간
15            speed : 250, // 스피드
16            current : 0, // 시작하는 값
17            auto : true, // 자동여부 : true(자동) / false(수동)
18            easing: null,
19            pageNumber : false,
20            preventDoubleEvent: true,
21            activeClass : 'on',
22            sliderClass : '.slider',
23            sliderList : '.slider_list>li',
24            dotButton : '.dot',
25            listContent : '.content',
26            prevButton : '.btn_prev',
27            nextButton : '.btn_next',
28            playButton : '.btn_play',
29            stopButton : '.btn_stop',
30            currentSlide : ".current_slide",
31            totalSlide : ".total_slide",
32            complexObjClasses: null,
33            complexObjDelayTimes: null,
34            complexObjAnimationSpeed: 500,
35            complexObjAnimationStartOptions:null,
36            complexObjAnimationEndOptions: null,
37            complexObjEasing : null
38        };
39        if(options) $.extend(this.settings, options);
40        this.set();
41        this.init();
42        this.eventHandler();
43    }
44    Slider.prototype.set = function(){
45        var _this = this;
46        this._evtCnt = 0;
47        this._curIdx = this.settings.current;
48        this._actIdx = this.settings.current;
49        this._slideFunc = {
50            "default": {
51                slideType: this.show,
52                prev: this.show,
53                next: this.show
54            },
55            "slide": {
56                slideType: this.slide,
57                prev: this.rightMove,
58                next: this.leftMove
59            },
60            "complex": {
61                slideType: this.complex,
62                prev: this.complexRightMove,
63                next: this.complexLeftMove
64            }
65        };
66        this._slideDirection = {"minus": null,"plus" : null,"zero": null};
67        this.currentPage = this.settings.current+1;
68        this.width = this.container.width();
69        this.height = this.container.height();
70        this.length = this.container.find(this.settings.sliderList).length;
71        this.elements = {
72            dotButtons: this.container.find(this.settings.dotButton),
73            listContents: this.container.find(this.settings.listContent),
74            sliderLists: this.container.find(this.settings.sliderList),
75            prevButton: this.container.find(this.settings.prevButton),
76            nextButton: this.container.find(this.settings.nextButton),
77            playButton: this.container.find(this.settings.playButton),
78            stopButton: this.container.find(this.settings.stopButton),
79            currentSlide: this.container.find(this.settings.currentSlide),
80            totalSlide: this.container.find(this.settings.totalSlide),
81            contents: function(idx){
82                return _this.container
83                        .find(_this.settings.sliderList)
84                        .eq(idx).find(_this.settings.listContent);
85            }
86        };
87
88        if(this.settings.complexObjClasses && this.settings.complexObjClasses.length === this.settings.complexObjDelayTimes.length){
89            this.elements.complexObjClasses = [];
90            for(var i=0; i < this.elements.sliderLists.length; i++){
91                    this.elements.complexObjClasses
92                    .push([]);
93                for(var j=0; j < this.settings.complexObjClasses.length; j++){
94                    this.elements.complexObjClasses[i]
95                    .push(this.elements.sliderLists.eq(i)
96                    .find(this.settings.complexObjClasses[j]));
97                }
98            }
99        }else{
100            new Error("컴플렉스 엘리먼트 개수와 딜레이타임 개수가 같지 않습니다.")
101        }
102        this._SlideWidthChk = function(){
103            if(this.settings.direction === "horizontal"){
104                this._slideDirection.minus = {"left": -this.width};
105                this._slideDirection.plus = {"left": this.width};
106                this._slideDirection.zero = {"left": 0};
107            }else if(this.settings.direction === "vertical"){
108                this._slideDirection.minus = {"top": -this.height};
109                this._slideDirection.plus = {"top": this.height};
110                this._slideDirection.zero = {"top": 0};
111            }
112        };
113        this.slideFunc = this._slideFunc[this.settings.type]["slideType"];
114        this.nextFunc = this._slideFunc[this.settings.type]["next"];
115        this.prevFunc = this._slideFunc[this.settings.type]["prev"];
116    };
117    Slider.prototype.init = function(){
118        var _this = this;
119        this._SlideWidthChk();
120        this.elements.sliderLists.eq(this._curIdx).siblings().find(this.settings.listContent).hide();
121
122        if(this.settings.auto && this.length > 1){
123            this.elements.playButton.hide();
124            this.autoPlay();
125        }else{
126            this.elements.stopButton.hide();
127        }
128        this.addActiveClass(this.settings.current);
129        if(this.settings.pageNumber) {
130            this.elements.totalSlide.html(this.length);
131            this.elements.currentSlide.html(this.currentPage);
132        }
133        if(this.elements.complexObjClasses && this.settings.type === "complex"){
134            var n;

135            this.complexAfterFunc = function(idx){
136                if($.type(this.settings.complexObjAnimationEndOptions[0]) === "array"){
137                    for(n = 0;n < _this.elements.complexObjClasses[idx].length; n++){
138                        _this.elements.complexObjClasses[idx][n]
139                        .show()
140                        .delay(_this.settings.complexObjDelayTimes[n])
141                        .animate(_this.settings.complexObjAnimationEndOptions[idx][n],
142                            _this.settings.complexObjAnimationSpeed,
143                            _this.settings.complexObjEasing, function(){
144                                _this._evtCnt += 1;
145                                if(_this._evtCnt === _this.elements.complexObjClasses[idx].length) {
146                                    _this._isPlay = false;
147                                    _this._evtCnt = 0;
148                                }
149                            }
150                        );
151                    }
152                }else if($.type(this.settings.complexObjAnimationEndOptions[0]) === "object"){
153                    for(n = 0;n < _this.elements.complexObjClasses[idx].length; n++){
154                        _this.elements.complexObjClasses[idx][n]
155                        .show()
156                        .delay(_this.settings.complexObjDelayTimes[n])
157                        .animate(_this.settings.complexObjAnimationEndOptions[n],
158                            _this.settings.complexObjAnimationSpeed,
159                            _this.settings.complexObjEasing,function(){
160                                _this._evtCnt += 1;
161                                if(_this._evtCnt === _this.elements.complexObjClasses[idx].length) {
162                                    _this._isPlay = false;
163                                    _this._evtCnt = 0;
164                                }
165                            }
166                        );
167                    }
168                }
169            };
170            this.complexObjInit = function(){
171                var n;
172                for(n=0; n < _this.settings.complexObjClasses.length; n++){
173                    _this.elements.listContents
174                    .find(_this.settings.complexObjClasses[n])
175                    .stop()
176                    .css(_this.settings.complexObjAnimationStartOptions[n]);
177                }
178            };
179            this.complexClearObj = function(){
180                _this.complexObjInit();
181                var n;
182                if($.type(this.settings.complexObjAnimationEndOptions[0]) === "array"){
183                    for(n = 0;n < _this.elements.complexObjClasses[_this._curIdx].length; n++){
184                        _this.elements.listContents.eq(_this._curIdx)
185                        .find(_this.settings.complexObjClasses[n])
186                        .css(_this.settings.complexObjAnimationEndOptions[_this._curIdx][n]);
187                    }
188                }else if($.type(this.settings.complexObjAnimationEndOptions[0]) === "object"){
189                    for(n = 0;n < _this.elements.complexObjClasses[_this._curIdx].length; n++){
190                        _this.elements.listContents.eq(_this._curIdx)
191                        .find(_this.settings.complexObjClasses[n])
192                        .css(_this.settings.complexObjAnimationEndOptions[n]);
193                    }
194                }
195
196            };
197            this._isPlay = true;
198            this.complexObjInit();
199            this.complexAfterFunc(this.settings.current);
200        }
201    };
202    Slider.prototype.show = function(idx){
203        if(this._curIdx === idx) return;
204        this.addActiveClass(idx);
205        this.elements.contents(this._curIdx).hide();
206        this.elements.contents(idx).show();
207        this._curIdx = idx;
208    };
209    Slider.prototype.slide = function(idx){
210        if(this._curIdx === idx) return;
211        idx >= this._curIdx ? this.leftMove(idx) : this.rightMove(idx);
212    };
213    Slider.prototype.complex = function(idx){
214        if(this._curIdx === idx) return;
215        idx >= this._curIdx ? this.complexLeftMove(idx) : this.complexRightMove(idx);
216    };
217    Slider.prototype.complexLeftMove = function(idx){
218        var _this = this;
219        this.evtDoubleChk(function(){
220            _this.complexClearObj();
221            _this.Move(idx,[
222                    _this._slideDirection.plus,
223                    _this._slideDirection.zero,
224                    _this._slideDirection.minus
225                ], function(){
226                    _this.complexAfterFunc(idx);
227                }
228            );
229        });
230    };
231    Slider.prototype.complexRightMove = function(idx){
232        var _this = this;
233        this.evtDoubleChk(function(){
234            _this.complexClearObj();
235            _this.Move(idx, [
236                _this._slideDirection.minus,
237                _this._slideDirection.zero,
238                _this._slideDirection.plus
239            ], function(){
240                _this.complexAfterFunc(idx);
241            });
242        });
243    };
244    Slider.prototype.leftMove = function(idx, afterFunc){
245        var _this = this;
246        this.evtDoubleChk(function(){
247            _this.Move(idx, [
248                _this._slideDirection.plus,
249                _this._slideDirection.zero,
250                _this._slideDirection.minus
251            ], afterFunc);
252        });
253    };
254    Slider.prototype.rightMove = function(idx, afterFunc){
255        var _this = this;
256        this.evtDoubleChk(function(){
257            _this.Move(idx, [
258                _this._slideDirection.minus,
259                _this._slideDirection.zero,
260                _this._slideDirection.plus
261            ], afterFunc);
262        });
263    };
264    Slider.prototype.Move = function(idx, direction, afterFunc){
265        var _this = this;
266        this.addActiveClass(idx);
267        if(this.settings.pageNumber)this.updatePageNumber(idx);
268        this.elements.listContents.css({'display':'none', 'z-Index':0});
269        this.elements.contents(idx).stop().css({"display":"block", 'z-Index':10}).css(direction[0]);
270        this.elements.contents(this._curIdx).stop().css({"display":"block", "left"

270: 0});
271        this.elements.contents(idx)
272        .animate(direction[1],
273            this.settings.speed,
274            this.settings.easing
275        );
276        this.elements.contents(this._curIdx)
277        .animate(direction[2],
278            this.settings.speed,
279            this.settings.easing, function(){
280                afterFunc ? afterFunc() : _this._isPlay = false;
281            }
282        );
283        this._curIdx = idx;
284    };
285    Slider.prototype.addActiveClass = function(idx){
286        this.elements.sliderLists.removeClass(this.settings.activeClass);
287        this.elements.sliderLists.eq(idx).addClass(this.settings.activeClass);
288    };
289    Slider.prototype.prev = function(){
290        this._actIdx = this._curIdx-1 < 0 ? this.length-1 : this._curIdx-1;
291        this.prevFunc(this._actIdx);
292    };
293    Slider.prototype.next = function(){
294        this._actIdx = this._curIdx+1 > this.length-1 ? 0 : this._curIdx+1;
295        this.nextFunc(this._actIdx);
296    };
297    Slider.prototype.autoPlay = function(){
298        var _this = this;
299        if(this.autoTimer){
300            clearInterval(this.autoTimer);
301        }
302        this.autoTimer = setInterval(function(){
303            _this.next();
304        }, _this.settings.time);
305    };
306    Slider.prototype.autoStop = function(){
307        clearInterval(this.autoTimer);
308        this.autoTimer = 0;
309    };
310    Slider.prototype.updatePageNumber = function(idx){
311        this.currentPage=idx+1;
312        this.elements.currentSlide.html(this.currentPage);
313    };
314    Slider.prototype.evtDoubleChk = function(afterfunc){
315        if(this.settings.preventDoubleEvent){
316            if(this._isPlay) return;
317        }
318        this._isPlay = true;
319        afterfunc();
320    };
321    Slider.prototype.eventHandler = function(){
322        if(this.length <= 1) return;
323        var _this = this;
324        this.elements.dotButtons.on("mouseenter focusin click", function(){
325            _this._actIdx = $(this).parent().index();
326            _this.slideFunc(_this._actIdx);
327        });
328        this.elements.prevButton.on("click", function(){
329            _this.prev();
330        });
331        this.elements.nextButton.on("click", function(){
332            _this.next();
333        });
334        this.container.on("mouseenter mouseleave focusin focusout", function(e){
335            if(!_this.settings.auto) return;
336            e.type === "mouseenter" || e.type === "focusin" ? _this.autoStop() :  _this.autoPlay() ;
337        });
338        this.elements.playButton.on("click", function(){
339            _this.elements.playButton.hide();
340            _this.elements.stopButton.show();
341            _this.settings.auto = true;
342            _this.autoPlay();
343        });
344        this.elements.stopButton.on("click", function(){
345            _this.elements.playButton.show();
346            _this.elements.stopButton.hide();
347            _this.settings.auto = false;
348            _this.autoStop();
349        });
350        $(window).on("resize",function(){
351            _this.width = _this.container.width();
352            _this._SlideWidthChk();
353        });
354    };
355    return Slider;
356})();