simple slide example 3(2015.06.16)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
    #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>
<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>
<script>
    var timer = null;
    var slides = $("#slider > li");
    var first = 0;
    var max = slides.length - 1;
    $("#slider > li").hide();
    $(slides[first]).show();
    $(function(){

        $("#slider").click(function(){
            first = first + 1; //first++
            if( first > max ) first = 0;
            $("#slider > li").hide();
            $(slides[first]).show();
        });

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

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

    });

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