프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] setinterval 이미지 자동 변경

2023.04.26
북마크 [출처 이동]    작성자 정보
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>
 


 

이 포스트 공유하기

전체목록