simple slide example 5(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;
    $("#slider > li").css({left:"-300px"});
    $(slides[first]).animate({left:"0"},1000);
    $(function(){

        $("#slider").click(function(){
            $(slides[first]).animate({left:"300px"},1000,function(){
                $(this).css({left:"-300px"});
            });
            first = first + 1; //first++
            if( first > max ) first = 0;
            $(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;
            }
        });

    });

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