아주 간단한 슬라이드 (2015.08.27)

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider #1</title>
<style> #slider img { display:none; } </style>
</head>
<body>
    <div id="slider">
        <img id="p1" src="http://lorempixel.com/500/300/nature">
        <img id="p2" src="http://lorempixel.com/500/300/sports">
        <img id="p3" src="http://lorempixel.com/500/300/animals">
        <img id="p4" src="http://lorempixel.com/500/300/food">
    </div>
    <div>
        <button onclick="next(-1)">이전</button>
        <button onclick="next(1)">다음</button>
    </div>
    <script>
        var pno = 0;
        function next(n){
            if( n === 1) {
                pno = pno + 1;
                if( pno > 4 ) pno = 1;
            } else if( n === -1 ) {
                pno = pno - 1;
                if( pno < 1 ) pno = 4;
            } else {
                return;
            }
            for( var i=1; i<=4; i++){
                var pid = "p" + i;
                var photo = document.getElementById(pid);
                if( pno == i ) {
                    photo.style.display = "block";
                } else {
                    photo.style.display = "none";
                }
            }
        }
        next(1);
    </script>
</body>
</html>