ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • (HTML/CSS/JS) 사진 갤러리 만들기
      HTML CSS JS 2021. 8. 17. 11:24

      - 웹사이트를 돌아다니다 보면 < > 버튼이 있고 누를 때 마다 사진이 변경되는 기능이 있다.

      예를 들면 네이버 메인페이지의 우측에 쇼핑 탭이 그러한데 이런식으로 되어있다.

      만들고 싶은 갤러리형

      - 버튼을 눌렀을 때, 다음 사진 or 이전 사진을 보여주는 기능을 만들어보자.

      - HTML로 틀을 만들어주는데, 사진을 미리 모두 넣어두고 CSS에서 hidden으로 숨겨놓았다가 버튼을 클릭하면 순서를 바꿔가며 사진을 보여주게 끔 만들었다.

      - 사진을 순서대로 보여주기 위한 Jquery의 insertBefore() , insertAfter() 함수, CSS의 overflow(고정된 틀 이상을 넘치는 사진들을 hidden으로 지정) 등등을 활용했다.

       

       

      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
      32
      33
      34
      35
      36
      37
      38
      39
      40
      41
      42
      43
      44
      45
      46
      47
      48
      49
      50
      51
      52
      53
      54
      55
      56
      57
      58
      59
      60
      61
      62
      63
      64
      65
      66
      67
      68
      69
      70
      71
      72
      73
      74
      75
      76
      77
      78
      79
      80
      81
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="UTF-8">
      <title>갤러리형사진</title>
      <style type="text/css">
       
          *{
              margin: 0;
              padding: 0;
          }
          #container{
              width: 250px;
          }
          .page, .page_n{
              margin: 10px;
          }
          #container .page button{
              border: 1px solid red;
              background: pink;
              width: 20px;
              height: 20px;
              overflow: hidden;
          }
          #container .photo{
              width: 620px;
              height: 370px;
              border: 1px solid black;
              overflow: hidden;
          }    
      </style>
      <script src="jquery-3.6.0.min.js"></script>
      <script type="text/javascript">
          $(document).ready(function(){
              var totalNum=$(".photo > div").length;
              var cNum = 1;
              $(".page_n > span:first").text(cNum);
              $(".page_n > span:last").text(totalNum);
              $(".btn1").click(function(){
                  cNum--;
                  if(cNum < 1){
                      cNum = totalNum;
                  }
                  $(".page_n > span:first").text(cNum);
                  $(".photo div:last").insertBefore(".photo div:first");
              });
              
              $(".btn2").click(function(){
                  cNum++;
                  if(cNum > totalNum){
                      cNum = 1;
                  }
                  $(".page_n > span:first").text(cNum);
                  $(".photo div:first").insertAfter(".photo div:last");
              });
          });
              
       
       
      </script>
      </head>
      <body>
       
      <div id = "container">
          <div class="page">
              <span class="page_n"> 
              <span></span> / <span></span> 
              </span>
              <button class="btn1">&lt;</button>
              <button class="btn2">&gt;</button>
          </div>
          <div class="photo">
              <div><img alt = "첫번째 사진" src = "img/chicken.jpg"></div>
              <div><img alt = "두번째 사진" src = "img/jajang.jpg"></div>
              <div><img alt = "세번째 사진" src = "img/pizza2.jpg"></div>
          </div>
      </div>
       
       
      </body>
      </html>
      		 cs

       

      처음 1번 사진
      오른쪽 버튼을 누르면 숫자가 2로 바뀌고 2번 사진을 보여준다.

       

      저작자표시

      'HTML CSS JS' 카테고리의 다른 글

      (HTML/CSS/JS) Google Map API를 사용해보자!  (1) 2021.08.20
      (HTML/CSS/JS) Jquery를 이용한 반응형 메뉴판 만들기  (0) 2021.08.17
      (HTML/CSS/JS) 간단한 이벤트 처리 해보기!  (0) 2021.08.11

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바