[js] 버튼 클릭시 여러 이미지 넘기기 (Carousel)

GY·2021년 5월 27일
0

Vanilla JS Project

목록 보기
3/19
post-thumbnail

결과물

codeboilder plate를 어떻게 사용하는지 몰라서..우선 엉성하게 만들어 기능을 구현하는데 초점을 두었다. 지금은 알지만...다시 제대로 만들어봐야겠다.

html

<html>
  <head>
    <title>carousel</title>
    <link href="mine.css" type="text/css" rel="stylesheet" />
    <style></style>
  </head>
  <body id="background">
    <div class="box1">
      <img
        id="boximg"
        src="Carousel_Boilerplate/Carousel_Boilerplate/images/image-1.png"
        style="width: 800px; height: 500px"
      />
    </div>

    <div class="arrows">
      <div class="arrowleft">
        <button
          type="button"
          class="btm_image"
          id="img_btn"
          style="height: 60px; width: 60px; border-radius: 100px"
          value="<"
          onclick="clickleft()"
        ></button>

        <div class="arrowright">
          <button
            type="button"
            class="btm_image2"
            id="img_btn"
            style="height: 60px; width: 60px; border-radius: 100px"
            value=">"
            onclick="clickright()"
          ></button>
          <div class="dots">
            <input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot1"
              onclick="clickdot(1)"
            />
            <input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot2"
              onclick="clickdot(2)"
            />
            <input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot3"
              onclick="clickdot(3)"
            />
            <input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot4"
              onclick="clickdot(4)"
            />
            <input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot5"
              onclick="clickdot(5)"
            />
          </div>
        </div>
      </div>
    </div>
    <script>
      var i = 1;
      var getimgno = document.getElementById("boximg");
      function clickright() {
        if (i < 6) {
          getimgno.setAttribute(
            "src",
            "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" +
              i +
              ".png"
          );
          i++;
          console.log(i);
        } else if ((i = 5)) {
          i = 1;
          console.log(i);
        }
      }
      function clickleft() {
        if (i > 0) {
          getimgno.setAttribute(
            "src",
            "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" +
              i +
              ".png"
          );
          i--;
          console.log(i);
        } else if ((i = 1)) {
          i = 5;
          console.log(i);
        }
      }
      function clickdot(n) {
        getimgno.setAttribute(
          "src",
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" + n + ".png"
        );
      }
    </script>
  </body>
</html>

css

#background {
  background-color: powderblue;
}

.box1 {
  position: fixed;
  left: 480px;
  top: 80px;

  padding: 10px;
  height: 500px;
  width: 800px;
  background-color: white;
  border: 0;
  outline: 0;
  overflow: hidden;
}

.arrowleft {
  position: fixed;
  left: 40px;
  border: 0;
  outline: 0;
  /* border-radius: 100px; */
  /* position: fixed; */
}
.arrowright {
  /* position: fixed;
  left: 5px; */
}

.btm_image {
  position: fixed;
  top: 300px;
  left: 300px;
}

.btm_image2 {
  position: fixed;
  top: 300px;
  left: 1400px;
}
.dots {
  position: fixed;
  left: 800px;
  top: 650px;
}

과정

TODO

[요구사항] # 1

페이지 로딩 시, 첫 번째 이미지 화면에 보이기

좌측, 우측 화살표 두개 보이기

화면 아래 쪽에 Dot 다섯개 보이기

*내용 추가예정: codeboilerplate를 다운받을 수 없어,대충만 만들었다. 다시 다운로드받아 수정할 예정이다.

*참고한 사항들

이미지의 가로세로비를 유지하면서 틀 안에 맞추려면 - Nothing New Under the Sun

[Javascript] 이미지 변경 (img src)

[요구사항] # 2

좌측 화살표 클릭시 이전 이미지 보여주기

우측 화살표 클릭시 다음 이미지 보여주기

새 배열을 만들어 [i+1]번째 배열을 출력하도록 만들면 될 것 같았다.

function clickright() {
        var img1 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-1.png";
        var img2 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-2.png";
        var img3 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-3.png";
        var img4 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-4.png";
        var img5 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-5.png";
        var imglist = [img1, img2, img3, img4, img5];
        // if ((document.getElementById("boximg").src = img1)) {
        //   document.getElementById("boximg").src = img2;
        // }
        if ((document.getElementById("boximg").src = imglist[i])) {
          document.getElementById("boximg").src = imglist[i + 1];
        }
        // console.log(indexof(document.getElementById("boximg").src));
        //  {
        //   document.getElementById("boximg").src = img2;

..이게 아닌 것 같다. 이미지1에서 버튼클릭시 2로 넘어가는 건 되는데,
이미지가 2일 경우 같은 버튼을 클릭하면 3으로 , 이미지3이 보일 때 클릭하면 4로 넘어가 노출할 수 있도록 바꾸어야 한다.

단순히 getElement를 사용해 조건문으로 만들 수는 없는 것 같아서, 다른 방법을 고민해보아야 했다.

왜 제대로 작동하지 않을까? 변수/함수의 선언이 문제일까?

var, let, const 차이점

//원래는 이렇게 각각 이미지 경로를 변수로 지정해 바꾸려고 했다.

var img1 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-1.png";
        var img2 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-2.png";
        var img3 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-3.png";
        var img4 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-4.png";
        var img5 =
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-5.png";
 if ((document.getElementById("boximg").src = img1)) {
     document.getElementById("boximg").src = img2;

//어떤 이유에선지 img2에서 3으로,3에서 4로 넘어가는 건 되지 않았다. 
//차라리 경로 안의 숫자만 바꿔 직접 지정할 수 있도록 해보는게 나을 것 같았다.
getimgno.setAttribute(
          "src",
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" + i + ".png"
        );

//그리고...버튼을 한번 누르면 변경될 이미지를 지정하는 건 가능하지만, 
//누르는 횟수에 따라 보이는 이미지가 다르게 하려면 버튼 클릭횟수를 카운트할 수 있어야 한다
//한번 클릭하면, +1이 되어야 한다.
var i = 1;
        i++;
        getimgno.setAttribute(
          "src",
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" + i + ".png"
        );
//for문으로 작성하면 이 안에서 자동으로 i가 1씩 커질텐데, 
//버튼이 클릭할 때마다 i+1이 되어야 하므로 따로 사용하지 않아도 될 것 같다.

[오류] 두번째 이미지 다음으로는 넘어가지 않아 콘솔 창에서 실행해봤더니,
i의 값으로 2만 계속해서 출력된다.

//이렇게 함수 밖으로 변수선언을 빼주었더니, 정상적으로 작동된다!
var i = 1;
      function clickright() {
/*내가 정의한 'clickright'이라는 함수 안에 var i=1로 변수가 정의되어있어, 
i+1이 되더라도 계속해서 i=1로 재선언 되었던 것 같다.

그럼 이제 이미지가 총 5개이니, i<6의 조건을 달고, '다음'버튼에더해 '이전'버튼의 기능도 추가해주자.

[요구사항] # 3

5번째 이미지가 나오면 1번째 이미지로 돌아가기

var i = 1;
      function clickright() {
        if (i < 6) {

          var getimgno = document.getElementById("boximg");
          getimgno.setAttribute(
            "src",
            "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" +
              i +
              ".png"
          );
          i++;
          console.log(i);//실행 과정을 보기 위해 테스트용으로 작성
        } else if ((i = 5)) {
          i = 1;
          console.log(i);//실행 과정을 보기 위해 테스트용으로 작성
        }
//문제는, i가 5가 되면 다시 1로 돌아가 첫번째 이미지를 보여줄 수 있지만, 
//두 번 클릭해야 된다는 것이다.
//버튼이 클릭할 때마다 함수가 실행되어 i=5가되면 1로 돌아가는데, 다시 클릭해야
//이 1로 이미지 경로를 변경해 첫번째 이미지가 노출 된다.

5번째 이미지에서 우측 화살표를 누를 경우, 1번째 이미지 보여주기

1번째 이미지에서 좌측 화살표를 누를 경우, 5번째 이미지 보여주기

var i = 1;
      var getimgno = document.getElementById("boximg");
      function clickright() {
        if (i < 6) {
          getimgno.setAttribute(
            "src",
            "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" +
              i +
              ".png"
          );
          i++;
          console.log(i);
        } else if ((i = 5)) {
          i = 1;
          console.log(i);
        }
      }
      function clickleft() {
        if (i > 0) {
          getimgno.setAttribute(
            "src",
            "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" +
              i +
              ".png"
          );
          i--;
          console.log(i);
        } else if ((i = 1)) {
          i = 5;
          console.log(i);
        }
      }

이미지 하단의 Dot를 누를 경우, 해당 순번의 이미지 보여주기

일일히 Dot 하나당 함수 하나씩을 정의하면 쉽기야 하겠지만, 효율적이지 않은 방법이다.

Dot을 클릭하면 이미지를 변경하는 함수를 하나만 정의하고, 그 안에서 다섯개의 Dot마다 해당 순번의 이미지를 각각 바꿀 수 있도록 코드를 작성해보고 싶다.
매개변수를 활용해 함수를 작성하면 되지 않을까?

<input
              type="button"
              style="
                background-color: #808080;
                border: 0;
                outline: 0;
                height: 10px;
                width: 10px;
                font-size: 35px;
                color: white;
                border-radius: 1000px;
                margin: 10px;
              "
              name="dot5"
              onclick="clickdot(5)"
function clickdot(n) {
        getimgno.setAttribute(
          "src",
          "Carousel_Boilerplate/Carousel_Boilerplate/images/image-" + n + ".png"
        );
      }

잘 작동된다!

배운점 정리

  • let,var,const의 차이점

var, let, const 차이점

  • 제이쿼리
    • 제이쿼리의 모든 코드는 순수 자바스크립트로 대체 가능하며, 개발자라면 그렇게 할 줄 알아야 한다.
  • Addeventlistener
  • 매개변수를 활용한 함수
  • 에러 : Declaration or —expected
  • setAttribute()
  • 화면이 정리되지 않은 상태라, 다시 정리해봐야겠다.

DOM, event - addEventListener를 쓰자

[js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener)

setAttribute를 사용해보자.

img src를 배열로 담아 보려 했던 이유는, 해당

[자바스크립트] 동일한 단어를 문자열에서 찾기, match() 함수

이런식으로 조건문 을 연속해 쓰려고 했더니 작동이 안된다.

if ((document.getElementById("boximg").src = img1)) {
          document.getElementById("boximg").src = img2;
        if ((document.getElementById("boximg").src = img2)) {
          document.getElementById("boximg").src = img3;

무언가..제대로 조건 인식이 되지 않는 것 같아서 보다 정확하게 인식해 조건을 달성할 수 있도록 하는 함수를 찾아봤다.

[자바스크립트] 동일한 단어를 문자열에서 찾기, match() 함수

var getimgno = document.getElementById("boximg");
        If(getimgno.src.match("img1"));
        {
          getimgno.src = "img2";
        }
      }
profile
GY
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
이전 포스트

[js] 숫자 야구 (Number Baseball)

다음 포스트

지그재그 클론 코딩(1)html,css

0개의 댓글