Marquee

by Evan Sharp

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<!-- MARQUEE - BEGIN  -->
<div id="marquee-container" class="clearfix">
    <div class="wrapper">
    
        <!-- MARQUEE 1 - BEGIN -->
        <section class="marquee aqua">
        
            <!-- CONTENT - BEGIN  -->
            <div id="marquee-content" class="m-all t1 d1-d4">
                <h1>checkmate</h1>
                <h3>in just one move</h3>
            </div>
            <!-- CONTENT - END  -->
            
            <!-- VISUALIZATION - BEGIN -->
            <div id="marquee-graphic-area" class="m-all t3-t5 d6-d9">
                <img src="http://www.ipsumimage.com/150x50" alt="EverBank" class="logo" class="marquee-graphic"/>
            </div>
            <!-- VISUALIZATION - END -->
            
        </section>
        <!-- MARQUEE 1 - END -->
        
    </div>
</div>
<!-- MARQUEE - END  -->

JavaScript

(function($) {
    
    var marquee = {
        handle: null,
        slides: null,
        slide:0,
        max:0,
        options:{
            auto: true,
            animate: true,
            duration: 1000,
            delay: 6000,
            onBeforeChange: function() {},
            onChange: function() {},
            onPause: function() {},
            onPlay: function() {},
            onLoad: function() {}
        },
        _create: function(){
            var t = this;
            if(!t.options.animate)
                t.options.duration = 0;
            t.slides = $(".marquee",t.element);
            t.max = t.slides.length-1;
            if(t.max <= 0)
                return; // there is only 1 slide or no slides at all!
            t.slides.not(":first").css({
                left: t.slides.eq(t.slide).outerWidth(true),
                opacity: 0
            });
            $(window).resize(function(){
                t.element.children().animate({height:t.slides.eq(t.slide).outerHeight(true)},t.options.duration);
            });
            t.play();
        },
        _next: function(){
            if(this.slide + 1 > this.max)
                return 0;
            else
                return (this.slide + 1)
        },
        goTo: function(i, f){
        var t = this;
            t._trigger("onBeforeChange");
            if(f != undefined && f){
                t._forward(i)
            }else{
                t._backward(i);
            }
            t.element.children().animate({height:t.slides.eq(i).outerHeight(true)},t.options.duration,function(){t.slide = i});
            t._trigger("onChange");
        },
        _backward: function(i){
            var t = this;
            t.slides.eq(i).css({
                left: -(t.slides.eq(i).outerWidth(true))
            }).animate({
                opacity: 1,
                left: 0
            },t.options.duration);
            t.slides.eq(t.slide).animate({
                opacity: 0,
     ...