> 웹 프론트엔드 > CSS 튜토리얼 > jQuery를 사용하여 설정된 간격으로 Div를 표시하고 숨기려면 어떻게 해야 합니까?

jQuery를 사용하여 설정된 간격으로 Div를 표시하고 숨기려면 어떻게 해야 합니까?

Mary-Kate Olsen
풀어 주다: 2024-12-08 12:46:11
원래의
167명이 탐색했습니다.

How Can I Use jQuery to Show and Hide Divs at Set Intervals?

jQuery를 사용하여 특정 시간 간격으로 Div 표시 및 숨기기

jQuery setInterval 기능을 활용하면 미리 정의된 간격으로 div를 표시할 수 있습니다. 순서대로 가시성을 제어합니다. 관련된 단계에 대한 자세한 개요는 다음과 같습니다.

코드 구현:

HTML 구조를 정의하고 세 개의 div(div1, div2, div3)를 생성하고 숨기는 것으로 시작합니다.

<div>
로그인 후 복사

JavaScript 코드에서 showDiv()라는 함수를 생성하여 div. 이 함수 내에서 카운터 변수를 사용하여 div를 반복하고 한 번에 하나씩 표시합니다.

function showDiv() {...}
로그인 후 복사

카운터를 초기화하여 현재 div를 추적하고 jQuery stop() 함수를 사용하여 진행 중인 div를 취소합니다. animations.

var counter = 0;
$('div', '#container').stop().hide();
로그인 후 복사

현재 div를 표시하려면 jQuery의 filter() 함수를 사용하여 카운터를 기준으로 적절한 div를 선택한 다음 다음을 사용하여 표시합니다. show('fast').

.filter(function() {...}).show('fast');
로그인 후 복사

마지막 div에 도달한 후 시퀀스가 ​​반복되도록 카운터를 늘리거나 재설정합니다.

counter == 3 ? counter = 0 : counter++;
로그인 후 복사

마지막으로 setInterval을 사용하여 타이머를 시작하고 설정합니다. 원하는 시간 간격(이 경우 5000밀리초).

var timer = setInterval(showDiv, 5000);
로그인 후 복사

이 솔루션은 유연하고 특정 시간 간격으로 div를 표시하고 숨기는 사용자 정의 가능한 방법으로, 순차 또는 시간별 표시가 필요한 시나리오에 적합합니다.

위 내용은 jQuery를 사용하여 설정된 간격으로 Div를 표시하고 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿