class 순차적 추가삭제반복 질문입니다!

class 순차적 추가삭제반복 질문입니다!

QA

class 순차적 추가삭제반복 질문입니다!

본문

기본


<li class="active">1</li>
<li>2</li>
<li>3</li>

1초후


<li>1</li>
<li class="active">2</li>
<li>3</li>

2초후


<li>1</li>
<li>2</li>
<li class="active">3</li>

3초후


<li class="active">1</li>
<li>2</li>
<li>3</li>

이걸 반복하려고하는데

통상적으로 setinterval 이걸쓰시나요 아니면

@keyframe주어서 class가 아닌 개별 id를 주어 css로 하시는지지요..

조언이나 관련링크 있으시면 부탁드립니다 ㅠ

 

 

이 질문에 댓글 쓰기 :

답변 1

시간에 따라 반복으로 일어나는 이벤트는

setinterval  함수를 이용하시면 됩니다

네! 감사합니다 ㅎ 셋인터벌로 해야겠네요~!


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<li>1</li>
<li>2</li>
<li>3</li>

<script>
	$(function(){
		var idx = 0; //초기화
		setInterval(time, 1000); // 시간은 1초로
		function time(){ 
			var box = $('li'); // 바뀌어야 할 선택자
			box.removeClass('on'); // 초기값 선택자(on) 삭제
			box.eq(idx).addClass('on'); // 해당순번 선택자 추가
			idx++;
			if(idx >= box.length) idx= 0;
		}
	});	
</script>

답변을 작성하시기 전에 로그인 해주세요.
전체 1,020
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT