https://stspb.ru/js/jquery.rotator.js

1
2;(function($){
3
4
5	var defaults = {
6		slides: [
7            			{url:'http://peterstamps.ru',img:'images/rotator/sl1.jpg'},
8            			{url:'http://peterstamps.ru',img:'images/rotator/sl2.jpg'},
9            			{url:'http://peterstamps.ru',img:'images/rotator/sl3.jpg'},
10            			{url:'http://peterstamps.ru',img:'images/rotator/sl4.jpg'},
11            		],
12		speed: 1000,
13		timeout: 5000,
14		width: 555,
15		height: 100,
16		random: false,
17		autorun: true,
18		fx: 'fade',
19		nav: false
20	};
21
22
23	$.rotator = function(e, o) {
24
25		this.options = $.extend({}, defaults, o || {});
26
27		this.el = $(e);
28        this.step = -1;
29        this.current = 0;
30        this.previous = 0;
31        this.animating = false;
32        this.intervalID = null;
33
34		this.nav_left = $('<a href="javascript:void(0);" class="rotator-nav" id="rotator-left"><div></div></a>');
35		this.nav_right = $('<a href="javascript:void(0);" class="rotator-nav" id="rotator-right"><div></div></a>');
36		this.preloader = $('<div class="preloader_rotator"></div>');
37		this.main_rotator = $('<div class="main_rotator"></div>');
38		this.slides_rotator = $('<ul class="slides_rotator"></ul>');
39
40		this.count = this.options.slides.length - 1;
41
42		this.init();
43
44	};
45
46
47	var $r = $.rotator;
48
49	$r.fn = $r.prototype = {
50        rotator: '0.1'
51    };
52
53	$r.fn.extend = $r.extend = $.extend;
54
55    $r.fn.extend({
56
57    	init: function(){
58
59    		this.preload();
60
61            var self = this;
62
63            this.nav_left.bind('click.rotator',function(){
64
65				self.prev();
66			});
67
68			this.nav_right.bind('click.rotator',function(){
69
70				self.next();
71			});
72
73    	},
74        add: function(slides){
75
76            if(slides.length == 0) return false;
77
78            var render = [], self = this;
79
80
81            this.count += slides.length-1;
82
83	    	$.each(slides,function(i,slide){
84
85	    		render.push('<li><div class="img_rotator"><a href="'+slide.url+'" target="_parent _blank"><img src="'+slide.img+'" width="'+self.options.width+'" height="'+self.options.height+'" alt="*" /></a></div></li>');
86	    	});
87
88	    	this.slides_rotator
89            .append(render.join(''))
90            .find('li')
91            .css({'position': 'absolute','z-index': 1,'left':this.options.width});
92
93        },
94    	preload: function(){
95
96    		//Индикатор загрузки
97	    	this.el.html(this.preloader.append('<img src="images/ajax-loader.gif" width="32" alt="Загрузка..." />'));
98	        var loaded = 0,pic = [],self = this;
99
100            //Добавляем html-разметку слайдов
101            this.slides = this.render().find('li').css({'position': 'absolute','z-index': 1});
102
103            this.main_rotator.css({display: 'none'});
104            this.slides_rotator.css({width:this.options.width,height:this.options.height});
105
106	        if(this.options.fx == 'fade'){
107
108	    		//Скрываем все слайды, кроме первого
109		        this.slides.css('opacity',0).eq(0).css({'z-index': 2,'opacity':1});
110	    	}
111	    	else{
112
113	    		this.slides_rotator.css('overflow','hidden');
114
115	    		//Задаем начальную позицию слайдам
116		        this.slides.css('left',this.options.width).eq(0).css({'z-index': 2,'left':0});
117
118             }
119
120             //Когда все изображения слайдов загрузятся
121	        //прячем индикатор загрузки и выводим первый слайд
122	        for (i=0; i <= this.count; i++) {
123
124	           pic[i] = new Image();
125
126               pic[i].onload = function() {
127
128	                loaded++;
129
130                    //Когда все картинки загружены
131                    //прячем индикатор загрузки и выводим слайды
132	                if(loaded >= self.count){
133
134	                	self.main_rotator.show();
135                        $('.rotator-nav').show();
136	                	self.preloader.hide();
137
138	                	if(self.options.autorun){
139
140	                		self.start();
141	                	}
142
143	                }
144	            };
145
146                pic[i].src = this.options.slides[i].img;
147	        }
148		},
149		render: function(){
150
151            this.el.append(this.main_rotator);
152
153            if(this.options.nav){
154
155                this.el.append(this.nav_left,this.nav_right);
156
157                $('.rotator-nav').hide();
158            }
159
160	        //Перемешиваем слайды
161            if(this.options.random){
162
163                this.options.slides.sort(function() {return 0.5 - Math.random()});
164            }
165
166
167	    	var render = [], self = this;
168
169	    	$.each(this.options.slides,function(i,slide){
170
171	    		render.push('<li><div class="img_rotator"><a href="'+slide.url+'" target="_parent _blank"><img src="'+slide.img+'" width="'+self.options.width+'" height="'+self.options.height+'" alt="*" /></a></div></li>');
172	    	});

173
174	    	return this.slides_rotator.html(render.join('')).appendTo(this.main_rotator);
175
176	    },
177        start: function(){
178            var self = this;
179            this.step = -1;
180	    	this.intervalID = setInterval(function(){self.next();},this.options.timeout);
181	    },
182        stop: function(){
183
184            clearInterval(this.intervalID);
185        },
186        next: function(){
187
188            if(this.animating) return false;
189
190            this.step = -1;
191
192	    	if(this.current >= this.count) this.current = -1;
193
194	    	this.previous = this.current;
195	    	this.current++;
196
197	    	if(this.current == 0) this.previous = this.count;
198
199	    	this.run();
200
201	    },
202        prev: function(){
203
204            if(this.animating) return false;
205
206            this.step = 1;
207	    	this.previous = this.current;
208	    	this.current--;
209
210	    	if(this.current < 0) this.current = this.count;
211
212        	this.run();
213        },
214        run: function(){
215
216            var self = this;
217
218            this.animating = true; //начало анимации
219
220            if(this.options.autorun) this.stop();
221
222        	if(this.options.fx == 'fade'){
223
224                this.slides.eq(this.previous)
225                .css('z-index',1)
226                .stop(true,true)
227                .animate({'opacity': 0},this.options.speed);
228
229        		this.slides.eq(this.current)
230                .css('z-index',2)
231                .stop(true,true)
232                .animate({'opacity': 1},this.options.speed,function(){
233                    self.animating = false; //конец анимации
234                });
235        	}
236        	else{
237
238                this.slides.eq(this.previous)
239                .css('z-index',1)
240                .stop(true,true)
241                .animate({'left': this.step*this.options.width},this.options.speed,function(){
242
243                    $(this).css('left',this.step*self.options.width);
244
245                });
246
247                var sc = this.slides.eq(this.current);
248
249                if(sc.css('left').match(/([-\d]+)/)[1] != -this.step*this.options.width){
250
251                    sc.css('left',-this.step*this.options.width);
252                }
253
254                sc.css({'z-index':2}).stop(true,true).animate({'left': 0},this.options.speed,function(){
255
256                    self.animating = false; //конец анимации
257
258                });
259        	}
260
261            if(this.options.autorun) this.start();
262        }
263
264    });
265
266    $.fn.rotator = function(o){
267
268    	if (typeof o == 'string') {
269            var instance = $(this).data('rotator'), args = Array.prototype.slice.call(arguments, 1);
270            return instance[o].apply(instance, args);
271        } else {
272            return this.each(function() {
273                var instance = $(this).data('rotator');
274                if (instance) {
275                    if (o) {
276                        $.extend(instance.options, o);
277                    }
278
279                    instance.init();
280
281                } else {
282
283                    $(this).data('rotator', new $r(this, o));
284                }
285            });
286        }
287    };
288})(jQuery);