간단한슬라이드(20150908)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>슬라이드</title>
<style>
    #slider {
        width: 500px;
        height: 300px;
        border: 1px solid #000;
        overflow: hidden;
    }
    #slider img {
        display: none;
    }
</style>
</head>
<body>
    <div id="slider" onclick="slide(1);">
        <img id="p1" src="images/food.jpg" width="500" height="300" alt="food">
        <img id="p2" src="images/sports.jpg" width="500" height="300" alt="sports">
        <img id="p3" src="images/nature.jpg" width="500" height="300" alt="nature">
        <img id="p4" src="images/fashion.jpg" width="500" height="300" alt="fashion">
        <img id="p5" src="images/transport.jpg" width="500" height="300" alt="transport">
    </div>
    <button onclick="slide(-1);">이전</button>
    <span id="cno">1</span>
    <button onclick="slide(1);">다음</button>
    <button onclick="auto();">자동슬라이드 시작/중지</button>
    <script>
        document.getElementById("p1").style.display="block";
        var sno = 1;
        var max = 5;
        function slide(n){
            sno = sno + n; // = sno++
            if( sno > max ) sno = 1;
            if( sno < 1 ) sno = max;
            document.getElementById("cno").innerHTML = sno;
            for( var i=1; i<=max; i++){
                var show = "none";
                if( i == sno ) show = "block";
                document.getElementById("p" + i).style.display=show;
            }
        }
        var timer = null;
        function auto(){
            if( timer == null ) {
                timer = setInterval( function(){ slide(1); }, 1000 );
            } else {
                clearInterval(timer);
                timer = null;
            }
        }
    </script>
</body>
</html>