Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

moozi

gallery프로그램 예제 본문

TIS_2016/HTML5_1기

gallery프로그램 예제

moozi 2016. 3. 24. 15:50

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Gallery by Javascript</title>
       
        <script type="text/javascript">
            //전역변수로 선언. num는 배열의 인덱스. 0 ~ 배열의크기-1
            // images.length - 배열의 크기
            var num=0;
            function next(){
                var images=document.getElementsByClassName("image");
                var output=document.getElementById("output");
               
                num++;//인덱스 하나 증가. 다음 이미지로
                if(num>=images.length){ //인덱스가 배열의 크기 이상이면
                    num=0; // 인덱스를 다시 0으로
                }
               
               
                output.src=images[num].src;//출력이미지에 배열의 이미지 설정
               
            }
           
            function prev(){
                var images=document.getElementsByClassName("image");
                var output=document.getElementById("output");
               
                num--;//인덱스 하나 감소. 이전 이미지로
                if(num<0){// 인덱스가 0보다 작아지면
                    num=images.length-1; // 인덱스를 배열의 크기-1 로
                }
               
               
                output.src=images[num].src;
               
            }
                  
        </script>
        <style type="text/css">
            .image{
                display: none;
            }
        </style>
   
   
    </head>
    <body onLoad="gallery()">
    <img id="output" src="img1.png" width="300" height="200">   

    <img class="image" src="img1.png" width="300" height="200">
    <img class="image" src="img2.png" width="300" height="200">
    <img class="image" src="img3.png" width="300" height="200">
    <img class="image" src="img4.png" width="300" height="200">
    <img class="image" src="img5.png" width="300" height="200">
    <img class="image" src="1.png" width="300" height="200">
    <img class="image" src="2.png" width="300" height="200">
    <img class="image" src="3.png" width="300" height="200">
    <img class="image" src="4.png" width="300" height="200">
    <img class="image" src="5.png" width="300" height="200">
    <p>
        <input type="button" value="이전" onClick="prev()">
        <input type="button" value="다음" onClick="next()">
    </p>

   


    </body>
</html>

'TIS_2016 > HTML5_1기' 카테고리의 다른 글

javascript 이벤트처리 방식 정리  (0) 2016.03.25
jquery 연습문제1  (0) 2016.03.24
AngularJS Custom Filter 예제  (0) 2016.03.23
파이차트그리기  (0) 2016.03.22
3/22 javascript canvas예제  (0) 2016.03.22
'TIS_2016/HTML5_1기' Related Articles more
Comments