[소스] setinterval 이미지 자동 변경
2023.04.26
작성일/수정일
2023-04-26 22:12:59 / 2023-04-26 22:12:59
JAVASCRIPT
5초 이미지 자동변경
- 변경할 이미지 주소를 배열에 담는다.
- new images() 객체를 생성하여 src= 경로를 배열에서 호출해서 변경한다.
- let ls_imgs = new images; 객체를 이용하는 이유는 서버에서 같은 이미지 호출을 막을 수 있단다. 음...
<script>
$(document).ready(function(){
let ls_1 = $("._ls_wrap");
let ls_2 = ls_1.find("._ls");
let ls_first;
let ls_last;
let ls_d;
let playon_loop;
let counter_loop;
let counter_area = "<span class='counter_area'></span>";
let counter_num;
$(".btn_ls").click(()=>{
clearInterval(playon_loop);
console.log("stop_play");
});
$(".btn_no").click(()=>{
clearInterval(counter_loop);
console.log("stop_counter");
});
playon();
counter_play(0);
function playon(){
playon_loop = setInterval( ()=>{
ls_last = ls_1.find("._ls").last();
ls_1.prepend(ls_last);
ls_2.find(".counter_area").remove();
clearInterval(counter_loop);
setTimeout( ()=>{
ls_first = ls_1.find("._ls").first();
ls_first.append(counter_area);
counter_num = 0;
counter_play(counter_num);
},50);
},4000);
}
function counter_play(counter_num){
counter_loop = setInterval( ()=>{
counter_wr(counter_num);
counter_num++;
console.log("counter_num", counter_num);
},50);
}
function counter_wr(counter_num){
ls_2.find(".counter_area").text(counter_num);
}
});
</script>