HTML, CSS 및 JQuery로 간단한 이미지 슬라이더를 만드는 방법

그림 회전 목마, 그림 슬라이더, 전화를 호출하든이 모드는 인터넷에서 너무 볼 수 있도록 거의 모든 웹 사이트에 하나가 있습니다. 귀하가 웹 개발자라면 직접 구축 할 수 있습니다. 이를 염두에두고 HTML, CSS 및 JQuery를 사용하여 간단한 사진 슬라이더를 만드는 방법을 살펴 보겠습니다.

html 구조

먼저, 클래스 이름 가있는 컨테이너 요소를 만듭니다. 컨테이너에는 사진이 들어 있습니다. 사진은 태그로 포장되어 슬라이드 쇼를 링크로 변환 할 수 있거나 그림 이외의 내용을 슬라이드 쇼로 사용할 수 있습니다. 첫 번째 컨테이너 에는 페이지가로드 될 때 슬라이더의 첫 번째 이미지가 표시되도록하는 인라인 스타일이 있습니다. 사용자 요청에 따라 슬라이드 쇼를 수동으로 반복하기위한 두 개의 버튼 요소도 있습니다.

CSS 스타일 여기, 우리는 그림 슬라이더, 컨테이너 및 내부 사진의 너비를 설정했습니다. 우리의 모든 컨테이너

는

로 설정되어 있음에 주목해야합니다. 그렇지 않은 경우, 모든 사진은 동시에 볼 수 있습니다. JavaScript를 사용하여 하나의 컨테이너를 설정하고 나머지는 숨겨져 있습니다. container div JavaScript 상호 작용 div

먼저 중요한 변수를 정의해야합니다. 첫 번째 변수는 이며 0으로 설정됩니다. 두 번째 변수는 이며

로 설정됩니다. 이것은 이미지가 포함 된 컨테이너 목록을 반환합니다. 세 번째 변수는 이며 변수의 길이로 설정됩니다. 마지막 변수는 그림 슬라이더의 총 슬라이드 수를 알려줍니다. 다음으로, 우리는 "cycleitems"라는 함수를 만듭니다. 이 기능은 올바른 이미지를 표시하는 데 사용되면서 다른 이미지가 숨겨져 있습니다. 이 함수 내에서 라는 변수를 만듭니다. 이 변수는

로 설정됩니다. jQuery가 제공 한

메소드는 정수를 가져 와서 정수와 일치하는 div가 반환 한 첫 번째 항목을 찾습니다. 따라서 div가 0이면 display: none;는 그림 슬라이더의 첫 번째 그림 컨테이너에 배치됩니다. 우리의 함수 내부에서, 다음으로해야 할 일은 모든 이미지 컨테이너를 숨기고 div로 설정하는 것입니다. display: inline-block; 이미지가 자동으로 회전되도록하려면 일정 시간이 지나면

기능을 지속적으로 호출 할 수있는 방법을 제공해야합니다. 우리는 cycleItems라는 다른 변수를 만들어이를 수행합니다. 이 변수는 3000 밀리 초 또는 3 초의 지연을 취하는 A autoSlide 기능을 저장합니다. 이 함수 내에서 setInterval 변수에 1을 추가하여 currentIndex는 항상 다음 컨테이너를 참조합니다. 그런 다음 매우 중요한 "if"진술을 정의합니다. 이 진술은 우리의 변수가 슬라이더의 총 그림 수보다 크면 변수가 0으로 재설정됨을 의미합니다. 이 IF 문이 없으면 이미지 목록을 살펴볼 수 없습니다. IF 문 후에는 기능을 호출합니다. $('.container div').eq(currentIndex) 다음, 우리는 이전 및 다음 작업을 정의합니다. 이전 버튼과 다음 버튼을 클릭 할 때 발생하는 일이 정의됩니다. 클릭하면 자동 루프를 취소한다는 점을 제외하고는 div 기능과 유사하게 작동합니다. 슬라이드 쇼를 수동으로 루프하려면 다음 버튼을 클릭하면 1이 변수에 1을 추가하고 이전 버튼을 클릭하면 currentIndex 변수가 1으로 줄어 듭니다. cycleItems 데모

Codepen에서 데모를 봅니다 autoSlide 추가 내용 currentIndex CSS와 HTML 만 사용하여 빌드 된 이미지 슬라이더를 보려면 Zack Wallace의 데모를 확인하십시오! (링크는 여기에 삽입해야하며 필요한 경우 링크를 제공 할 수 있습니다) currentIndex faq (faq)

(원래 FAQ 부분에 따라 다시 작성하고 연마 할 수 있으므로 컨텐츠의 일관성을 유지하면서 언어 표현이 더 자연스럽고 매끄 럽습니다. 위의 단계를 통해 간단한 사진 슬라이더를 만들 수 있습니다. CSS 스타일과 JavaScript 코드를 다양한 효과에 대한 요구에 맞게 조정할 수 있습니다.

위 내용은 HTML, CSS 및 JQuery로 간단한 이미지 슬라이더를 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!