var QScroller = new Class({ options: { slides: "qslide", direction: "h", duration: 5e3, auto: false, delay: 1e3, transition: Fx.Transitions.linear }, initialize: function (a, b) { this.setOptions(b); this.wrapper = $(a); this.wrapper.setStyles({ position: "relative", overflow: "hidden" }); this.wrapper.addEvent("mouseenter", this.fireEvent.pass("onMouseEnter", this)); this.wrapper.addEvent("mouseleave", this.fireEvent.pass("onMouseLeave", this)); this.slideOut = (new Element("div")).setStyles({ position: "absolute", overflow: "hidden", top: 0, left: 0, width: this.wrapper.getStyle("width"), height: this.wrapper.getStyle("height") }).injectInside(this.wrapper); this.slideIn = this.slideOut.clone(); this.slideIn.injectInside(this.wrapper); this.slides = $$("." + this.options.slides); if ($defined(this.options.buttons)) { if ($defined(this.options.buttons.next)) { $(this.options.buttons.next).addEvent("click", this.next.bind(this)) } if ($defined(this.options.buttons.prev)) { $(this.options.buttons.prev).addEvent("click", this.prev.bind(this)) } if ($defined(this.options.buttons.play)) { $(this.options.buttons.play).addEvent("click", this.play.bind(this)) } if ($defined(this.options.buttons.stop)) { $(this.options.buttons.stop).addEvent("click", this.stop.bind(this)) } } this.auto = this.options.auto; this.idxSlide = 0; this.step = 0; this.isFirst = true }, load: function () { if (!this.isFirst) { this.idxSlide += this.step; if (this.idxSlide > this.slides.length - 1) { this.idxSlide = 0 } else if (this.idxSlide < 0) { this.idxSlide = this.slides.length - 1 } } this.curSlide = this.slides[this.idxSlide].clone(); this.show() }, show: function () { var a = this.slideIn.getElement("div"); if (a) { a.replaceWith(this.curSlide) } else { this.curSlide.injectInside(this.slideIn) } this.doEffect() }, doEffect: function () { this.fxOn = true; var a = this.isFirst ? 0 : this.options.duration; var b = this.options.transition; var c = this.slideIn.effects({ duration: a, transition: b }); var d = 0; var e = 0; var f = 0; var g = 0; var h = this.wrapper.getStyle("width").toInt(); var i = this.wrapper.getStyle("height").toInt(); if (this.step > 0) { if (this.options.direction == "h") { d = -h; f = h } else { e = -i; g = i } } else { if (this.options.direction == "h") { d = h; f = -h } else { e = i; g = -i } } if (this.isFirst) { if (this.auto) { this.step = 1 } this.isFirst = false } c.start({ top: [e, 0], left: [d, 0], opacity: [1, 1] }); this.slideOut.effects({ duration: a, transition: b }).start({ top: [0, g], left: [0, f] }); this.fxEnd.delay(a + 75, this) }, fxEnd: function () { this.fxOn = false; this.swapSlides(); if (this.auto) { $clear(this.timer); this.timer = this.load.delay(this.options.delay, this) } }, stop: function () { $clear(this.timer); this.auto = false }, play: function () { if (!this.auto) { $clear(this.timer); this.auto = true; this.step = 1; if (!this.fxOn) { this.load() } } }, next: function () { this.stop(); if (this.fxOn) { return } this.step = 1; this.load() }, prev: function () { this.stop(); if (this.fxOn) { return } this.step = -1; this.load() }, swapSlides: function () { this.slideOut.setStyles({ zIndex: 0, opacity: 0 }); var a = this.slideOut; this.slideOut = this.slideIn; this.slideIn = a } }); QScroller.implement(new Options, new Events)