var MGFX MGFX MGFX Rotater new Class Implements Options Events slideIn

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
var MGFX = MGFX || {};
MGFX.Rotater = new Class({
Implements: [Options, Events],
/*
slideInterval: Time (ms) to remain on each slide.
transitionDuration: Time (ms) for the fade effect.
startIndex: Which slide to start at in the animation. Zero-based index.
autoplay: Whether to start the rotating of the slides on load.
hover: Allow a hover event to stop the rotating.
*/
options: {
slideInterval: 4000,
transitionDuration: 1000,
startIndex: 0,
autoplay: true,
hover:true
},
initialize: function(slides,options){
this.setOptions(options);
this.slides = $$(slides);
this.createFx();
this.showSlide(this.options.startIndex);
if(this.slides.length < 2) this.options.autoplay = false;
if(this.options.autoplay) this.autoplay();
if(this.options.hover) this.slides.addEvent('mouseenter',function() { this.stop(); }.bind(this));
return this;
},
toElement: function(){
return this.container;
},
createFx: function(){
if (!this.slideFx) this.slideFx = new Fx.Elements(this.slides, {duration: this.options.transitionDuration});
this.slides.each(function(slide){
slide.setStyle('opacity',0);
});
},
showSlide: function(slideIndex){
var action = {};
this.slides.each(function(slide, index){
if(index == slideIndex && index != this.currentSlide){ //show
action[index.toString()] = {
opacity: 1
};
} else {
action[index.toString()] = {
opacity:0,
};
}
}, this);
this.fireEvent('onShowSlide', slideIndex);
this.currentSlide = slideIndex;
this.slideFx.start(action);
return this;
},
autoplay: function(){
this.slideshowInt = this.rotate.periodical(this.options.slideInterval, this);
this.fireEvent('onAutoPlay');
return this;
},
stop: function(){
$clear(this.slideshowInt);
this.fireEvent('onStop');
return this;
},
rotate: function(){
current = this.currentSlide;
next = (current+1 >= this.slides.length) ? 0 : current+1;
this.showSlide(next);
this.fireEvent('onRotate', next);
return this;
}
});
var MGFX = MGFX || {};
MGFX.Tabs = new Class({
Extends: MGFX.Rotater,
options: {
slideInterval: 6000,
transitionDuration: 500,
autoplay: false
},
initialize: function(tabs, slides, options){
this.tabs = $$(tabs +' li');
this.tabsA = $$(tabs + ' a');
this.createTabs();
this.parent(slides,options);
return this;
},
createTabs: function () {
this.tabsA.each(function(tab,index){
tab.addEvent('click', function(event){
event.stop();
this.showSlide(index);
this.stop();
}.bind(this));
}.bind(this));
},
activateTab: function(tabIndex) {
this.tabs.removeClass('active');
this.tabsA.removeClass('active');
this.tabs[tabIndex].addClass('active');
this.tabsA[tabIndex].addClass('active');
},
showSlide: function(slideIndex){
if(slideIndex == this.currentSlide) return;
this.activateTab(slideIndex);
this.parent(slideIndex);
return this;
}
});