이미지 넘기기

imjingu·2023년 7월 19일
js
0

개발공부

목록 보기
154/481
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #galleryZone {
            text-align: center;
        }
    </style>
    <script>

        let num = 1;
        const showGllery = function (direction) { 
            let flag = true; // flag true 일 경우(num 1, 9가 아닐경우) if(flag) 로 넘어감
            if(direction) { // 다음을 클릭한 경우(0=flase, 1=true)
                if(num === 9) {
                    alert("마지막 이미지 입니다.");
                    flag = false; // 이미지가 9개인 경우 num이 9인 경우 함수 종료
                }
                else {
                    num++;
                }
            }
            else { // 이전을 클릭한 경우(0=flase, 1=true)
                if (num === 1) {
                    alert("첫 이미지 입니다.");
                    flag = false; // 첫 이미지가 1번이어서 함수 종료
                }
                else {
                    num--;
                }
            }
            if (flag) {
                let imgTag = document.getElementById("photo");
                // id값이 photo인 요소를 가져와서 imgTag 에 저장
                
                imgTag.setAttribute("src", "../img/pic_" + num + ".jpg");
                // imgTag 에 id값인 photo요소의 src 속성을 변경
            }
        }
    </script>
</head>
<body>
    <div id="galleryZone">
        <p><img src="../img/pic_1.jpg" id="photo" alt="" width="100px" height="100px"></p>
        <p>
            <button onclick="showGllery(0)">이전</button>
            <button onclick="showGllery(1)">다음</button>
        </p>
    </div>
</body>
</html>

profile
imjingu
이전 포스트

아이디, 패스워드 확인

다음 포스트

나머지 매개변수

0개의 댓글