jquery slide 20141030-1

<!doctype html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>slide</title>
<style>
    body{margin:0;}
    #slidebox{position:relative;width:500px;height:300px;   margin:10px auto;overflow:hidden;}
    #slide{width:500px;height:300px;overflow:hidden;list-style:none;    padding:0;margin:0;}
    #slide li{position:absolute;left:0;top:0;}
    #buttons{width:500px;height:auto;text-align:center; margin:0 auto;}
</style>
</head>
<body>
    <div id="slidebox">
        <ul id="slide">
            <li><img src="http://lorempixel.com/500/300/food"></li>
            <li><img src="http://lorempixel.com/500/300/nature"></li>
            <li><img src="http://lorempixel.com/500/300/animals"></li>
            <li><img src="http://lorempixel.com/500/300/city"></li>
        </ul>
    </div>
    <div id="buttons">
        <button id="prev">이전</button>
        <button id="next">다음</button>
        <button id="up">위로</button>
        <button id="down">아래로</button>
        <button id="start">시작</button>
        <button id="stop">중지</button>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript">

        $(function(){

            $("#slide > li").css("left",-500);
            var slides = $("#slide > li");
            var sno = 0;
            var max = slides.length - 1;
            $(slides[sno]).css({left:0,top:0});
            var isanimate = false;
            var direction = "next";

            $("#next").click(function(){
                if( isanimate ) return;
                direction = "next";
                isanimate = true;
                $(slides[sno]).animate({left:500},1000,function(){isanimate=false;});
                sno++;
                if(sno>max) sno=0;
                $("#slide > li").css({left:-500,top:0});
                $(slides[sno]).animate({left:0},1000);
            });

            $("#prev").click(function(){
                if( isanimate ) return;
                direction = "prev";
                isanimate = true;
                $(slides[sno]).animate({left:-500},1000,function(){isanimate=false;});
                sno--;
                if(sno<0) sno=max;
                $("#slide > li").css({left:500,top:0});
                $(slides[sno]).animate({left:0},1000);
            });

            $("#up").click(function(){
                if( isanimate ) return;
                direction = "up";
                isanimate = true;
                $(slides[sno]).animate({top:-300},1000,function(){isanimate=false;});
                sno++;
                if(sno>max) sno=0;
                $("#slide > li").css({left:0,top:300});
                $(slides[sno]).animate({top:0},1000);
            });

            $("#down").click(function(){
                if( isanimate ) return;
                direction = "down";
                isanimate = true;
                $(slides[sno]).animate({top:300},1000,function(){isanimate=false;});
                sno--;
                if(sno<0) sno=max;
                $("#slide > li").css({left:0,top:-300});
                $(slides[sno]).animate({top:0},1000);
            });

            var timer = null;
            $("#start").click(function(){
                if( timer == null ) {
                    timer = setInterval(function(){ $("#" + direction).click(); },3000);
                }
            });

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

            $("#start").click();

        });

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