simple slide example 6(2015.06.16) 위아래

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    .wrap {
        width: 300px;
        margin: 0 auto;
    }
    #slider {
        width: 300px;
        height: 200px;
        position: relative;
        list-style: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #slider > li {
        width:300px;
        height: 200px;
        position: absolute;
        left: 0;
        top: 0;
    }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="wrap">
    <h1>Image Slide</h1>
    <ul id="slider">
        <li><img src="http://lorempixel.com/300/200/nature"></li>
        <li><img src="http://lorempixel.com/300/200/sports"></li>
        <li><img src="http://lorempixel.com/300/200/cats"></li>
        <li><img src="http://lorempixel.com/300/200/city"></li>
        <li><img src="http://lorempixel.com/300/200/food"></li>
    </ul>
    <button id="start">시작</button>
    <button id="stop">중지</button>
</div>
<script>
    var timer = null;
    var slides = $("#slider > li");
    var first = 0;
    var max = slides.length - 1;
    var dir = "right";

    $("#slider > li").css({left:"-300px"});
    $(slides[first]).animate({left:"0"},1000);
    $(function(){

        $("#slider").click(function(){
            if( dir == "right" ) {
                var to = "300px";
                var from = "-300px";
            } else if( dir == "left") {
                var to = "-300px";
                var from = "300px";
            } else if( dir == "up") {
                //
                //
            } else if( dir == "down") {
                //
                //
            }

            $(slides[first]).animate({left:to},1000,function(){
                $(this).css({left:from});
            });
            first = first + 1; //first++
            if( first > max ) first = 0;
            $(slides[first]).css({left:from});
            $(slides[first]).animate({left:"0"},1000);
        });

        $("#start").click(function(){
            if( timer == null ) {
                timer = setInterval(function(){
                    $("#slider").click();
                },2000);
            }
        });

        $("#stop").click(function(){
            if( timer != null ) {
                clearInterval(timer);
                timer = null;
            }
        });

    });

$(document).keydown(function(e) {
    switch(e.which) {
        case 37: // left
                                dir = "left";
                                $("#slider").click();
        break;
        case 38: // up
        break;
        case 39: // right
                                dir = "right";
                                $("#slider").click();
        break;
        case 40: // down
        break;
        default: return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});

</script>
</body>
</html>