JavaScript

[JS] 이미지 슬라이드쇼 만들기

(งᐛ)ว 2023. 10. 10. 22:51
728x90
 
<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Insert title here</title>
        <style type="text/css">
            a{text-decoration: none;}
        </style>
       
        <script type="text/javascript">
            var num=1; //이미지번호
            var path = "image/img"; //파일경로. img1~7까지 있음
           
            function prev(){
                num--;
               
                if(num<1){
                    num=7;
                }
                var my_a = document.getElementById("gallery"); //id가 gallery인 요소를 my_a변수에 할당.
                                                                                                즉, my_a변수에는 현재페이지에서 id가 gallery인
                                                                                                이미지요소에 대한 참조가 저장됨
                my_a.src = path + num + ".jpg"; //my_a변수를 사용하여 gallery 이미지 요소의 src 속성을
                                                                     새 이미지 파일경로로 설정.
            }
           
            function next(){
                num++;
               
                if(num>7){
                    num=1;
                }
                var my_b = document.getElementById("gallery");
                my_b.src = path + num + ".jpg";
            }
           
            setInterval("next()",1000); //1초에 한장씩 자동으로 넘어가는 기능      
        </script>
    </head>
    <body>
        <p>
            <a href="#" onclick="prev();">
                <img alt="이전" src="image/left_btn.png">
            </a>
           
            <img alt="갤러리" id="gallery" src="image/img1.jpg" width="300" height="200">
           
            <a href="#" onclick="next();">
                <img alt="다음" src="image/right_btn.png">
            </a>
        </p>
    </body>
</html>
 
728x90