https://www.career.go.kr/cnet/js/rew/jrolling.js;jsessionid=DE95E56F58964A6B85BAB0A0EA3F6DBB

1/**
2 * jQuery Syaku Rolling ver 1.2.0
3 *
4 * Copyright (c) Seok Kyun. Choi. 최석균
5 * GNU Lesser General Public License
6 * http://www.gnu.org/licenses/lgpl.html
7 *
8 * registered date 20110830
9 * http://syaku.tistory.com
10 */
11
12(function($) {
13
14  $.fn.srolling = function(settings) {
15
16    settings = jQuery.extend({
17      data : [ ],
18      name : '#srolling_area', // 롤링
19      item_count : 1, // 아이템 움직임 수
20      cache_count : 10, // 임시 아이템 수
21      width : 100, // 아이템 크기
22      height : 100,
23      auto : false, // 자동 움직임
24      delay : 1000, // 딜레이시간
25      delay_frame : 500, // 흐르는 속도
26      move : 'left',
27      prev : '#srolling_prev',
28      next : '#srolling_next'
29    }, settings);
30
31    var name = settings.name;
32    var auto = settings.auto;
33    var auto_go = auto;
34    var delay = settings.delay;
35    var delay_time = delay *2;
36    var delay_frame = settings.delay_frame
37    var move = settings.move;
38    var prev = settings.prev;
39    var next = settings.next;
40
41    var data = settings.data;
42    var item_count = settings.item_count;
43    var cache_count = settings.cache_count;
44    var index = settings.index;
45    var item_width = settings.width;
46    var item_height = settings.height;
47
48    var item_total = data.length; // 아이템 총수
49    var prev_idx = item_total;
50    var next_idx = 0;
51
52    var start_left = item_width *-2;
53
54    var w_full_size = (parseInt(item_width) * parseInt(item_total)) * 10;
55
56    switch (move) {
57      case 'down' : 
58      case 'top' : 
59        w_full_size = item_width; 
60        start_left = item_height * (cache_count *-1);
61      break;
62    }
63
64    var box = this;
65    var box_area = box.append("<div id='srolling_area' style='width:" + w_full_size + "px;position: absolute;white-space:nowrap;'></div>");
66    box_area = jQuery(name,box);
67    var item_area = jQuery("<div></div>").css("width",item_width).css("height",item_height).css("float","left").css("overflow","hidden");
68
69    var sTime = null;
70    var sTime2 = null;
71
72    function _initialize() {
73      _items();
74      if (auto) { _play(); }
75
76      jQuery(prev).click(function() {
77        _prev_act();
78      });
79
80      jQuery(next).click(function() {
81        _next_act();
82      });
83
84      jQuery(box_area).mouseover(function() {
85        if (auto) {
86          clearTimeout(sTime);
87          auto_go = false;
88        }
89      });
90
91      jQuery(box_area).mouseout(function() {
92        if (auto) {
93          auto_go = true;
94          _play();
95        }
96      });
97
98      // html5 & jquerymobile
99      box_area.bind('swipeleft', function(event) {
100        _next_act();
101      });
102      box_area.bind('swiperight', function(event) {
103        _prev_act();
104      });
105
106    }
107
108    function _start_box() {
109      switch (move) {
110        case 'down' : 
111        case 'top' : box_area.css('top',start_left); break;
112        case 'right' : 
113        case 'left' : box_area.css('left',start_left); break;
114      }
115    }
116
117    function _play() {
118      switch (move) {
119        case 'down' : 
120        case 'right' : sTime = setTimeout(_prev_auto_act,delay_time); break;
121        case 'top' : 
122        case 'left' : sTime = setTimeout(_next_auto_act,delay_time); break;
123      }
124    }
125
126    function _prev_auto_act() {
127      if (auto && auto_go) {
128        _prev_act();
129        sTime = setTimeout(_prev_auto_act,delay_time);
130      }
131    }
132    
133    function _next_auto_act() {
134      if (auto && auto_go) {
135        _next_act();
136        sTime =setTimeout(_next_auto_act,delay_time);
137      }
138    }
139
140    function _prev_act() {
141      var prev_obj = jQuery(prev);
142      var next_obj = jQuery(next);
143
144      prev_obj.unbind('click');
145      next_obj.unbind('click');
146
147      switch (move) {
148        case 'left' : 
149        case 'right' : 
150
151          box_area.animate({
152            left: '+=' + (item_width * item_count)
153          }, delay_frame, function() { 
154            for (var i = 0; i < item_count; i++) { box_area.children().last().remove(); }
155            _create_prev();
156            _start_box();
157
158            prev_obj.click(_prev_act);
159            next_obj.click(_next_act);
160
161          });
162
163        break;
164        case 'top' : 
165        case 'down' : 
166
167
168          box_area.animate({
169            top: '+=' + (item_height * item_count)
170          }, delay_frame, function() { 
171            for (var i = 0; i < item_count;

171 i++) { box_area.children().last().remove(); }
172            _create_prev();
173            _start_box();
174            prev_obj.click(_prev_act);
175            next_obj.click(_next_act);
176          });
177
178        break;
179      }
180
181    }
182
183    function _next_act() {
184      var prev_obj = jQuery(prev);
185      var next_obj = jQuery(next);
186
187      prev_obj.unbind('click');
188      next_obj.unbind('click');
189
190      switch (move) {
191        case 'down' : 
192        case 'top' : 
193
194          box_area.animate({
195            top: '-=' + (item_height * item_count)
196          }, delay_frame, function() { 
197            for (var i = 0; i < item_count; i++) { box_area.children().first().remove(); }
198            _create_next();
199            _start_box();
200            prev_obj.click(_prev_act);
201            next_obj.click(_next_act);
202          });
203
204        break;
205
206        case 'right' : 
207        case 'left' : 
208
209          box_area.animate({
210            left: '-=' + (item_width * item_count)
211          }, delay_frame, function() { 
212            for (var i = 0; i < item_count; i++) { box_area.children().first().remove(); }
213            _create_next();
214            _start_box();
215            next_obj.click(_next_act);
216            prev_obj.click(_prev_act);
217          });
218
219        break;
220      }
221
222    }
223
224    function _items() {
225      _start_box();
226      
227      for (var i = cache_count; i > 0; i--) {
228        if (item_total <= prev_idx || prev_idx < 0) { prev_idx = item_total-1; }
229        var t_obj = item_area.clone();
230        box_area.prepend( t_obj.append(jQuery(data[prev_idx])).attr('class','srolling_item_' + prev_idx) );
231        prev_idx--;
232      }
233      
234      for (var i=0; i < cache_count; i++) {
235        if (item_total <= next_idx || next_idx < 0) { next_idx = 0; }
236        var t_obj = item_area.clone();
237        box_area.append( t_obj.append(jQuery(data[next_idx])).attr('class','srolling_item_' + next_idx) );
238        next_idx++;
239      }
240
241    }
242
243    function _create_prev() {
244      var p_obj = box_area.children().first().attr('class');
245      prev_idx = parseInt(p_obj.replace('srolling_item_','')) - 1;
246
247      for (var i = item_count; i > 0; i--) {
248        if (item_total <= prev_idx || prev_idx < 0) { prev_idx = (item_total-1); }
249
250        var t_obj = item_area.clone();
251        box_area.prepend( t_obj.append(jQuery(data[prev_idx])).attr('class','srolling_item_' + prev_idx) );
252        prev_idx--;
253      }
254    }
255
256    function _create_next() {
257      var n_obj = box_area.children().last().attr('class');
258      next_idx = parseInt(n_obj.replace('srolling_item_','')) + 1;
259
260      for (var i=0; i < item_count; i++) {
261        if (item_total <= next_idx || next_idx < 0) { next_idx = 0; }
262
263        var t_obj = item_area.clone();
264        box_area.append( t_obj.append(jQuery(data[next_idx])).attr('class','srolling_item_' + next_idx) );
265        next_idx++;
266      }
267    }
268
269    _initialize();
270  };
271  
272})(jQuery);