Scene slide

Scene.js

/*
#scenes .scene.animate{transition: left 0.7s;}
#scenes .scene.in{left:0;}
#scenes .scene.left{left:-100%;}
#scenes .scene.right{left:100%;}
*/
var Scene = (function () {
    var scenes = [];
    var sceneSequence = '0';

    var getCurrent = function () {
        return sceneSequence;
    };

    var setCurrentIndicator = function (index) {
        $('.scene-indicator button').removeClass('on');
        $('.scene-indicator button:eq(' + index + ')').addClass('on');
    };

    var showSceneByIndex = function(target, direction) {
        if (direction === undefined) {
            direction = target - sceneSequence;
        }

        if (direction > 0) {
            scenes[sceneSequence].addClass('left animate');
            scenes[target].removeClass('left in animate').addClass('right');
            scenes[target].css('height');
            scenes[target].removeClass('right').addClass('in animate');
        } else {
            scenes[sceneSequence].addClass('right animate');
            scenes[target].removeClass('right in animate').addClass('left');
            scenes[target].css('height');
            scenes[target].removeClass('left').addClass('in animate');
        }

        sceneSequence = target;
        setCurrentIndicator(sceneSequence);
        SceneBackground.setBackground(sceneSequence);
    };

    var showPreviousScene = function() {
        var targetSequence = sceneSequence - 1;
        if (targetSequence < 0) {
            targetSequence = scenes.length - 1;
        }

        showSceneByIndex(targetSequence, -1);
    };

    var showNextScene = function() {
        var targetSequence = sceneSequence + 1;
        if (targetSequence >= scenes.length) {
            targetSequence = 0;
        }

        showSceneByIndex(targetSequence, 1);
    };

    var clickIndicator = function(index) {
        if (sceneSequence === index) {
            return false;
        }
        showSceneByIndex(index);
    };

    var init = function() {
        var html = [];

        $('#scenes .scene').each(function (index, item) {
            scenes.push($(item));
        });

        for (var i = 0, cnt = scenes.length; i < cnt; i++) {
            html.push('<button data-sequence="' + i + '">' + i + '번째 영상 재생</button>');
        }
        $('.scene-indicator').append(html.join('')).find('button').on('click', function (event) {
            var $item = $(event.target);
            var sequence = $item.attr('data-sequence');
            clickIndicator(sequence);
        });

        setCurrentIndicator(sceneSequence);
    };

    return {
        getCurrent: getCurrent,
        init: init
    };
})();