jQuery 이미지 한칸씩 앞당기기 실습

12 Dec 2020 in Programming on JavaScript

◇ jQuery 실습 포스팅 시리즈 ◇

1. 이미지 한칸씩 앞당기기 실습 - 현재 글
2. 마우스 on/off 실습
3. 야매 트위터 - 글자수 세기 실습
4. jQuery CodePlayer 실습

• 위와 같이 이미지가 한칸씩 앞으로가는 실습을 할 것이다. 사실 2초마다 바뀌는 거다. 동영상 넘 개떡같이 찍었네.. 지금 와서 보니, 핀이털 넘 이상해서 미안하다. 앞으론 미용실 데려갈게..

• 앞에서 jquery function과 attr를 잘 공부했다면 딱히 어렵지 않은 실습이다. 이미지가 교체되는 부분의 html 코드는 다음과 같다. 그냥 div태그에 이미지를 넣어놓으면 끝이다.

  <div class ="ani">
      <img src ="img/dog2.jpg">
      <img src ="img/dog3.jpg">
      <img src ="img/dog4.jpg">
  </div>
  

• img의 크기를 다똑같이 맞추기 위해 $(‘img’).attr({“width”:200,”height”:150})를 해준다.

• setInterval(function A,2000);로 2초마다 function A 함수가 실행되게한다.

• $(“div.ani img”).first().appendTo(“div.ani”) ani 클래스 가진 div 요소의 첫번째 img 자손을 div.ani에 추가해라.

  • 부연 설명을 하자면, 현재 ani 클래스를 가진 div요소의 첫번째 img 는 dog2.jpg 이다.

          <div class ="ani">
              <img src ="img/dog2.jpg">
              <img src ="img/dog3.jpg">
              <img src ="img/dog4.jpg">
          </div>
    

      이걸 appendTo("div.ani")를 하면, **dog2가 요소들 맨 끝에 추가 된다.**
    
      ```jsp
      <div class ="ani">
          <img src ="img/dog3.jpg">
          <img src ="img/dog4.jpg">
          <img src ="img/dog2.jpg">
      </div>
      ```
    

    전체코드

     <script src = "script/jquery-3.5.1.min.js"></script>
     <script>
         $(function(){
             $('img').attr({"width":200,"height":150})
             setInterval(function(){
                 $("div.ani img").first().appendTo("div.ani");
             },2000);
         })
     </script>
    

앞에서 jquery function과 attr를 잘 공부했다면 딱히 어렵지 않은 실습이다. 라고 앞에서 말했다. 나는 잘 공부를 못한듯 싶다. 더 공부해야지..