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>
답변을 작성하시기 전에 로그인 해주세요.
