jQuery slot machine

by Max Shu

HTML

<div align="center">
    <ul class="programs">
        <li class="intro">Не знаешь куда податься? Жмакай!</li>
        <li><a class="link" href="http://design.hse.ru/bak">Дизайн</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/isct/">Информатика и вычислительная техника</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/se/">Программная инженерия</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/cosec/">Компьютерная безопасность</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/histart/">История искусств</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/hist/">История</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/cultural/">Культурология</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/math/">Математика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/am/">Прикладная математика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/ami/">Прикладная математика и информатика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/oriental/">Востоковедение и африканистика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/ia/">Международные отношения</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/political/">Политология</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/psy/">Психология</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/soc/">Социология</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/journ/">Журналистика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/media/">Медиакоммуникации</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/ad/">Реклама и связи с общественностью</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/phil/">Философия</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/bi/">Бизнес-информатика</a></li>
        <li><a class="link" href="http://www.hse.ru/ba/gmu/">Государственное и...

CSS

body {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-weight: 200;
}

li {
    width: 40em;
    padding: 3px 0;
    vertical-align: top;
    font-size: 1.25em;
    /* text-align: left; */
    margin: 0;
    /* border-bottom: 1px solid #ddd; */
}

ul {
    padding: 0;
    margin: 0;
    list-style: none;
}

.jSlots-wrapper {
    overflow: hidden;
    height: 2.25em;
    display: inline-block;
    /* to size correctly, can use float too, or width*/
    border: 1px solid #ddd;
    box-shadow: inset 0 1px 3px	#ddd;
    margin: 2em 0 1em;
}
.programs {
    float: left;
}

JavaScript

$(document).ready(function () {
        $('.programs').jSlots({
            spinner: '#playBtn',
            time: 4000,
            loops: 5,
            easing: 'linear',
            number: 1,
            // endNumbers: [24] //<----- Added endNumbers option
        });
    });

/*
 * jQuery jSlots Plugin
 * http://matthewlein.com/jslot/
 * Copyright (c) 2011 Matthew Lein
 * Version: 1.0.2 (7/26/2012)
 * Dual licensed under the MIT and GPL licenses
 * Requires: jQuery v1.4.1 or later
 */

(function ($) {

    $.jSlots = function (el, options) {

        var base = this;

        base.$el = $(el);
        base.el = el;

        base.$el.data("jSlots", base);

        base.init = function () {

            base.options = $.extend({}, $.jSlots.defaultOptions, options);

            base.setup();
            base.bindEvents();

        };


        // --------------------------------------------------------------------- //
        // DEFAULT OPTIONS
        // --------------------------------------------------------------------- //

        $.jSlots.defaultOptions = {
            number: 6, // Number: number of slots
            winnerNumber: 1, // Number or Array: list item number(s) upon which to trigger a win, 1-based index, NOT ZERO-BASED
            spinner: '', // CSS Selector: element to bind the start event to
            spinEvent: 'click', // String: event to start slots on this event
            onStart: $.noop, // Function: runs on spin start,
            onEnd: $.noop, // Function: run on spin end. It is passed (finalNumbers:Array). finalNumbers gives the index of the li each slot stopped on in order.
            onWin: $.noop, // Function: run on winning number. It is passed (winCount:Number, winners:Array)
            easing: 'swing', // String: easing type for final spin
            time: 5000, // Number: total time of spin animation
            loops: 4, // Number: times it will spin during the animation
            endNumbers: [] // *ADDED* Array:...