이미지 태그의 src가 1초마다 반복적으로 변경되게 진행하려고 합니다
본문
<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
아 너무 감사드립니다 ^^
답변을 작성하시기 전에 로그인 해주세요.