이미지 태그의 src가 1초마다 반복적으로 변경되게 진행하려고 합니다

이미지 태그의 src가 1초마다 반복적으로 변경되게 진행하려고 합니다

QA

이미지 태그의 src가 1초마다 반복적으로 변경되게 진행하려고 합니다

답변 2

본문


<script type="text/javascript">
    $(document).ready(function() {
  setInterval(function() {
    img_return()
  }, 1000);
});
    
    function img_return() {
  $(".sec2_bottom__product1").attr("src","/img/sec2_bottom__product1_active.png")
        
}
  
    </script>

 

이렇게 반복설정을 하였는데, 

 

function img_return() 여기에 실행되는 attr 변경문에서 다시 원래대로 돌아가 /img/sec2_bottom__product1.png 로 변경 후, 반복되게 설정을 어떻게 해야 할까요?

 

이미지 태그의 src가 1초마다 반복적으로 변경되게 진행하려고 합니다 ㅠㅠ

이 질문에 댓글 쓰기 :

답변 2


<script type="text/javascript">
    var num = 0;
    $(document).ready(function() {
  setInterval(function() {
    img_return()
  }, 1000);
});
    
    function img_return() {
      num++;
      if(num % 2 == 0){
          $(".sec2_bottom__product1").attr("src","/img/sec2_bottom__product1.png");
      }else{
          $(".sec2_bottom__product1").attr("src","/img/sec2_bottom__product1_active.png");
      }
        
}
  
    </script>
 

같은 방식, 짧은 코드입니다. 굳이 길게 적을 필요가 없지요.


<script>
let step = 0;
function img_return() {
  let img = $(".sec2_bottom__product1");
  img.attr("src", step++%2 ? "/img/sec2_bottom__product1.png" : "/img/sec2_bottom__product1_active.png");
}
$(document).ready(function() {
  setInterval(img_return, 1000);
});
</script>

또는 이미지 주소에 _active 존재 여부로 치환하는 방법도 있습니다.

이미지 이름을 길게 적을 필요도 없이 대상 지정하면, 편하게 _active 붙였다 뗐다 반복.

 

동작 방식의 차이로 setInterval()보다 setTimeout()이 나을 수 있습니다.

 

+ setInterval()

- https://developer.mozilla.org/en-US/docs/Web/API/setInterval

 

+ setTimeout()

- https://developer.mozilla.org/en-US/docs/Web/API/setTimeout

- https://developer.mozilla.org/ko/docs/Web/API/setTimeout

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 81
© SIRSOFT
현재 페이지 제일 처음으로