日暮里JS vol.6サンプルコード

index.js

(function () {

    'use strict';

    ////////////////////////////////////////////////////
    /**
     * Local functions.
     */
    function randomNumGet(from, to){

        return from + (Math.random() * (to - from + 1) << 0);
    }
    
    function init() {

        var list = $('.mainMenuList li'),
            nextNum = 0,
            _tmpList = [],
            slideshow = new Slideshow($('.mainMenuList'));

        /**
         * Randomize menu.
         */
        while (list.length) {
            nextNum = randomNumGet(0, list.length - 1);
            _tmpList.push(list.splice(nextNum, 1)[0]);
        }

        $('.mainMenuList').append(_tmpList);

        /**
         * Set controll to buttons.
         */
        $('.btnLeft').click(function () {
            slideshow.prev();
        });
        $('.btnRight').click(function () {
            slideshow.next();
        });
    }

    /**
     * defined slideshow class
     * @class slideshow
     */
    function Slideshow(el) {
        this.el = $(el);
        this.view = this.el.parent();
        this.current = 0;
    }
    Slideshow.prototype = {
        /**
         * Set current.
         */
        setCurrent: function (index) {
        
            var $el = $(this.el),
                baseWidth = $el.find('li').width(),
                maxNum = $el.find('li').length,
                _index = (index > maxNum) ? 0 : index;

            $el.animate({
                'left': -baseWidth * _index
            });
        },
        next: function () {
        
            var index = 0;

            if (this.hasNext()) {
                index = ++this.current;
            }
            else {
                this.current = index = 0;
            }

            this.setCurrent(index);
        },
        prev: function () {
        
            var index = 0;

            if (this.hasPrev()) {
                index = --this.current;
            }
            else {
                this.current = index = this.max() - this.maxCheck();
            }

            this.setCurrent(index);
        },
        hasNext: function () {
        
            var maxNum = this.maxCheck();

            return (this.current + 1 < maxNum);
        },
        hasPrev: function () {

            return (this.current - 1 >= 0);
        },
        max: function () {

            return this.el.find('li').length;
        },
        maxCheck: function () {

            var maxNum = 0,
                viewWidth = this.view.width(),
                unitWidth = this.el.find('li').width(),
                maxCnt = 0;

            maxCnt = (viewWidth / unitWidth) << 0;

            return Math.ceil(this.el.find('li').length / maxCnt) + 1;
        }
    };


    $(function () {
    
        /**
         * Initialized slideshow.
         */
        init();
    });
}());