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

qoqofh 3년 전 조회 3,449

</p>

<p><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></p>

<p>

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

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

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

#이미지 #무한 #반복 #변경

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

채택된 답변

+20 포인트

레전드플랫폼

3년 전

</p>

<p><script type="text/javascript"></p>

<p>    var num = 0;

    $(document).ready(function() {

  setInterval(function() {

    img_return()

  }, 1000);

});

    

    function img_return() {</p>

<p>      num++;</p>

<p>      if(num % 2 == 0){</p>

<p>          $(".sec2_bottom__product1").attr("src","/img/sec2_bottom__product1.png");</p>

<p>      }else{

          $(".sec2_bottom__product1").attr("src","/img/sec2_bottom__product1_active.png");</p>

<p>      }

        

}

  

    </script>

 </p>

<p>

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

BiHon

3년 전

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

</p>

<p><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></p>

<p>

또는 이미지 주소에 _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

로그인 후 평가할 수 있습니다