[소스] setinterval 이미지 자동 변경
2023.04.26
북마크 작성자 정보
작성일/수정일
2023-04-26 22:12:59 / 2023-04-26 22:12:59
1. 이미지 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>
2. DB에서 데이터 호출 후 script(css) 적용 목적
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function(){
let addnum = 1;
const selec_div = $("div.num").text();
let inpt_val = "";
let check_loading = setInterval( timeloop, 500);
function timeloop(){
input_val = $(".inpt_val").val();
console.log("inpt_val",addnum ++, input_val.length );
if(input_val.length > 0){
fun_stop_loading(input_val);
}
}
$(".btn_stop").click( function(){
fun_stop_loading();
});
fun_insert_txt = () => {
$("input").val("stop_loading");
}
fun_stop_loading = (input_val_txt) => {
console.log("stop_loading", input_val_txt);
clearInterval(check_loading);
$(".num").html(input_val_txt);
}
});
</script>
<style>
* { padding:0px; margin:0px; border:0; }
header { width:100%; height:80px; line-height: 80px; text-align:center; border-bottom-color:#ddd; border-bottom-width:1px; border-bottom-style:solid; }
footer { width:100%; height:100px; border-top-color:#ddd; border-top-width:1px; border-bottom-style:solid; text-align: center; }
section { width:100%; }
article { margin:0 auto; width:1170px; min-height:50px; border:1px solid #ddd; }
article:nth-child(2) { margin-top:30px; border-bottom-style: 1px solid #ececec; }
.data_area .num { width:100%; /* border:1px solid red; */ }
</style>
</head>
<body>
<header>
<div class="header_area">
Header
</div>
</header>
<section>
<article>
<div class="data_area">
<p class="num">여기에 input 값을 불러옵니다.</p>
</div>
</article>
<article>
<div class="input_area">
<div class="inpt_area">
LOADING DATA : <input type="text" name="text_inpt" value="" class="inpt_val" />
<button onclick="javascript:fun_insert_txt();">Insert txt</button><br/>
<span class="btn_stop">Loop Stop</span>
</div>
</div>
</article>
</section>
<footer>
<div class="footer_area">
Footer
</div>
</footer>
</body>
</html>
