간단한 3단계로 JavaScript 슬라이드쇼를 만드는 방법

에 대한 가이드를 읽었다면 웹사이트를 만드는 방법 , 당신은 당신의 기술을 향상시키기 위해 다음에 무엇을해야할지 궁금해 할 수 있습니다. 사진 슬라이드쇼를 만드는 것은 놀라울 정도로 쉬운 작업이며 프로그래밍 직업을 얻는 데 필요한 귀중한 기술을 가르칠 수 있는 작업입니다.

오늘은 처음부터 JavaScript 슬라이드쇼를 만드는 방법을 보여 드리겠습니다. 바로 뛰어들자!

전제 조건

코딩을 시작하기 전에 몇 가지 사항을 알아야 합니다. 적절한 웹 브라우저 및 선택한 텍스트 편집기와 함께(나는 숭고한 텍스트 )에 대한 약간의 경험이 필요합니다. HTML , CSS , 자바스크립트 , 그리고 제이쿼리 .

자신의 기술에 자신이 없다면 문서 객체 모델 사용에 대한 가이드와 CSS를 배우기 위한 이 팁을 읽어보십시오. JavaScript에 자신이 있지만 이전에 jQuery를 사용한 적이 없다면 jQuery에 대한 기본 안내서를 확인하십시오.

1. 시작하기

이 슬라이드쇼에는 다음과 같은 몇 가지 기능이 필요합니다.

이미지 지원
이미지 변경 컨트롤
텍스트 캡션
자동 모드

간단한 기능 목록인 것 같습니다. 자동 모드는 이미지를 순서의 다음 이미지로 자동 진행합니다. 다음은 코드를 작성하기 전에 수행한 대략적인 스케치입니다.

왜 귀찮게 계획을 세우는지 궁금하다면 역사상 최악의 프로그래밍 실수를 살펴보십시오. 이 프로젝트는 아무도 죽지 않을 것이지만 더 큰 코드를 작업하기 전에 코드와 계획 절차를 확실히 이해하는 것이 중요합니다. 비록 그것이 대략적인 스케치일지라도 말입니다.

다음은 시작하는 데 필요한 초기 HTML입니다. 다음과 같은 적절한 이름으로 파일에 저장합니다. index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

코드는 다음과 같습니다.

좀 쓰레기죠? 개선하기 전에 분해합시다.

이 코드에는 '표준'이 포함되어 있습니다. HTML , 머리 , 스타일 , 스크립트 , 그리고 신체 태그. 이러한 부분은 모든 웹사이트의 필수 구성 요소입니다. 제이쿼리 Google CDN을 통해 포함됩니다. 지금까지 고유하거나 특별한 것은 없습니다.

본문 내부에는 id가 인 div가 있습니다. 쇼컨테이너 . 슬라이드쇼를 저장할 래퍼 또는 외부 컨테이너입니다. 나중에 CSS를 사용하여 이것을 개선할 것입니다. 이 컨테이너 안에는 각각 비슷한 목적을 가진 세 개의 코드 블록이 있습니다.

상위 클래스는 클래스 이름으로 정의됩니다. 이미지 컨테이너 :

이것은 단일 슬라이드를 저장하는 데 사용됩니다. 이미지와 캡션은 이 컨테이너 내부에 저장됩니다. 각 컨테이너에는 문자로 구성된 고유 ID가 있습니다. 에_ 그리고 숫자. 각 컨테이너에는 1에서 3까지 다른 번호가 있습니다.

마지막 단계로 이미지가 참조되고 캡션이 div 안에 저장됩니다. 표제 수업:

Dog

숫자 파일 이름으로 이미지를 만들고 이라는 폴더에 저장했습니다. 이미지 . HTML을 일치하도록 업데이트하면 원하는 대로 호출할 수 있습니다.

슬라이드쇼에 이미지를 더 많이 또는 더 적게 포함하려면 코드 블록을 복사하여 붙여넣거나 삭제하면 됩니다. 이미지 컨테이너 필요에 따라 파일 이름과 ID를 업데이트하는 것을 잊지 마십시오.

마지막으로 탐색 버튼이 생성됩니다. 이를 통해 사용자는 이미지를 탐색할 수 있습니다.

 ❮  
 ❯

이것들 HTML 엔티티 코드는 아이콘 글꼴이 작동하는 방식과 유사한 방식으로 앞으로 및 뒤로 화살표를 표시하는 데 사용됩니다.

2. CSS

이제 핵심 구조가 준비되었으므로 모양을 만들 차례입니다. 예쁜 . 이 새 코드 이후의 모습은 다음과 같습니다.

이 CSS를 다음 사이에 추가하십시오. 스타일 태그:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

지금이 훨씬 나아보이죠? 코드를 살펴보겠습니다.

모든 샘플 이미지를 사용하고 있습니다. 670 x 503픽셀 , 따라서 이 슬라이드쇼는 대부분 해당 크기의 이미지를 중심으로 디자인되었습니다. 다른 크기의 이미지를 사용하려면 CSS를 적절하게 조정해야 합니다. 이미지 크기를 일치하는 크기로 조정하는 것이 좋습니다. 크기가 다른 이미지는 스타일 문제를 일으킬 수 있습니다.

대부분 이 CSS의 설명은 자명합니다. 이미지를 저장할 컨테이너의 크기를 정의하고, 모든 것을 가운데 정렬하고, 버튼 및 텍스트 색상과 함께 글꼴을 지정하는 코드가 있습니다. 이전에는 접하지 못한 몇 가지 스타일이 있습니다.

커서: 포인터 -- 버튼 위로 커서를 이동하면 커서가 화살표에서 가리키는 손가락으로 변경됩니다.
불투명도: 0.65 -- 버튼의 투명도를 높입니다.
사용자 선택: 없음 -- 이렇게 하면 실수로 버튼의 텍스트를 강조 표시할 수 없습니다.

버튼에서 이 코드의 대부분의 결과를 볼 수 있습니다.

여기서 가장 복잡한 부분은 이 이상한 모양의 선입니다.

.imageContainer:not(:first-child) {

매우 이례적으로 보일 수 있지만 상당히 자명합니다.

첫째, 다음을 사용하여 모든 요소를 대상으로 합니다. 이미지 컨테이너 수업. NS :아니다() 구문은 대괄호 안의 모든 요소가 제외 된 이 스타일에서. 마지막으로, : 첫째 아이 구문에 따르면 이 CSS는 이름과 일치하는 모든 요소를 대상으로 해야 합니다. 하지만 첫 번째 요소를 무시하십시오. 그 이유는 간단합니다. 이것은 슬라이드쇼이므로 한 번에 하나의 이미지만 필요합니다. 이 CSS는 첫 번째 이미지를 제외한 모든 이미지를 숨깁니다.

3. 자바스크립트

퍼즐의 마지막 조각은 JavaScript입니다. 이것은 실제로 슬라이드쇼가 제대로 작동하도록 하는 논리입니다.

이 코드를 귀하의 스크립트 꼬리표:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

반직관적으로 보일 수 있지만 코드의 초기 블록을 건너뛰고 코드를 절반부터 설명하는 것으로 바로 넘어갈 것입니다. 걱정하지 마세요. 모든 코드를 설명합니다!

두 개의 변수를 정의해야 합니다. (JavaScript에서 변수를 정의하는 방법은 다음과 같습니다.) 이러한 변수는 슬라이드쇼의 주요 구성 변수로 생각할 수 있습니다.

var currentImage = 1;  
var totalImages = 3;

슬라이드쇼의 총 이미지 수와 시작할 이미지 수를 저장합니다. 더 많은 이미지가 있으면 간단히 변경하십시오. 총 이미지 보유하고 있는 총 이미지 수에 대한 변수입니다.

두 가지 기능 이미지 증가 그리고 감소 이미지 전진 또는 후퇴 현재 이미지 변하기 쉬운. 이 변수가 1보다 낮거나 높아야 합니다. 총 이미지 , 하나 또는 총 이미지 . 이렇게 하면 슬라이드쇼가 끝에 도달하면 반복됩니다.

처음의 코드로 돌아갑니다. 이 코드는 다음 및 이전 버튼을 '타겟팅'합니다. 각 버튼을 클릭하면 적절한 증가하다 또는 감소하다 행동 양식. 완료되면 화면의 이미지를 페이드 아웃하고 새 이미지를 페이드 인합니다( 현재 이미지 변하기 쉬운).

NS 멈추다() 메소드는 jQuery에 내장되어 있습니다. 보류 중인 이벤트가 취소됩니다. 이렇게 하면 각 버튼 누름이 원활하게 이루어지며, 마우스에 약간 미친 경우 실행을 기다리는 100개의 버튼 누름이 모두 없게 됩니다. NS 페이드인 (1) 그리고 페이드아웃(1) 방법은 필요에 따라 이미지를 페이드 인 또는 페이드 아웃합니다. 숫자는 페이드의 지속 시간을 밀리초 단위로 지정합니다. 이 값을 500과 같이 더 큰 숫자로 변경해 보십시오. 숫자가 클수록 전환 시간이 길어집니다. 그러나 너무 멀리 가면 이미지 변경 사이에 이상한 이벤트나 '깜박임'이 보이기 시작할 수 있습니다. 작동 중인 슬라이드쇼는 다음과 같습니다.

자동 진행

이 슬라이드쇼는 이제 꽤 괜찮아 보이지만 마지막 마무리 작업이 필요합니다. 자동 진행은 이 슬라이드쇼를 더욱 빛나게 해줄 기능입니다. 일정 시간이 지나면 각 이미지는 자동으로 다음 이미지로 넘어갑니다. 그러나 사용자는 여전히 앞이나 뒤로 탐색할 수 있습니다.

Windows 10 업그레이드 디스크 공간이 부족합니다

이것은 jQuery로 쉬운 작업입니다. 매번 코드를 실행하려면 타이머를 만들어야 합니다. NS 초. 그러나 새 코드를 작성하는 것보다 가장 쉬운 방법은 다음 이미지 버튼의 '클릭'을 에뮬레이트하고 기존 코드가 모든 작업을 수행하도록 하는 것입니다.

다음은 필요한 새 JavaScript입니다. 감소 이미지 기능:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

여기에서 많은 일이 벌어지고 있지 않습니다. NS 창.setInterval 메서드는 끝에 지정된 시간에 정의된 대로 코드 조각을 정기적으로 실행합니다. 시간 2500 (밀리초 단위)는 이 슬라이드쇼가 2.5초마다 진행됨을 의미합니다. 숫자가 작을수록 각 이미지가 더 빠른 속도로 진행됩니다. NS 딸깍 하는 소리 메서드는 사용자가 마우스로 버튼을 클릭한 것처럼 버튼을 트리거하여 코드를 실행합니다.

다음 JavaScript 챌린지에 대한 준비가 되었다면 GatsbyJS와 같은 정적 웹사이트 빌더 또는 Vue와 같은 프런트엔드 프레임워크를 사용하여 웹사이트를 구축해 보세요. Ruby 학습자라면 Jekyll도 옵션입니다. Jekyll과 GatsbyJS가 서로 어떻게 대응하는지 보여줍니다.

이미지 크레디트: Shutterstock.com을 통한 Tharanat Sardsri

공유하다 공유하다 트위터 이메일 오디오북을 무료로 다운로드할 수 있는 8가지 최고의 웹사이트

오디오북은 훌륭한 엔터테인먼트 소스이며 소화하기 훨씬 쉽습니다. 다음은 무료로 다운로드할 수 있는 8가지 최고의 웹사이트입니다.

다음 읽기 관련 항목

프로그램 작성
자바스크립트
웹 디자인

저자 소개 조 코번(136건의 출판물)

Joe는 영국 링컨 대학교에서 컴퓨터 공학을 전공했습니다. 그는 전문 소프트웨어 개발자이며 드론을 날리거나 작곡을 하지 않을 때 종종 사진을 찍거나 동영상을 제작하는 모습을 볼 수 있습니다.

조 코번이 참여한 작품 더보기

뉴스레터 구독

기술 팁, 리뷰, 무료 전자책 및 독점 거래에 대한 뉴스레터에 가입하십시오!

구독하려면 여기를 클릭하세요.