Jak zbudować pokaz slajdów JavaScript w 3 prostych krokach

Jeśli czytałeś nasz przewodnik dalej jak zrobić stronę internetową , być może zastanawiasz się, co dalej zrobić, aby poprawić swoje umiejętności. Tworzenie pokazu slajdów ze zdjęć to zaskakująco łatwe zadanie, które może nauczyć Cię cennych umiejętności potrzebnych do zdobycia pracy programistycznej .

Dzisiaj pokażę Ci, jak zbudować od podstaw pokaz slajdów JavaScript. Wskoczmy od razu!

Wymagania wstępne

Zanim zaczniesz kodować, musisz wiedzieć kilka rzeczy. Wraz z odpowiednią przeglądarką internetową i wybranym przez Ciebie edytorem tekstu (polecam Wzniosły tekst ), będziesz potrzebować trochę doświadczenia z HTML , CSS , JavaScript , oraz jQuery .

Jeśli nie masz pewności co do swoich umiejętności, koniecznie przeczytaj nasz przewodnik dotyczący korzystania z obiektowego modelu dokumentu i te wskazówki dotyczące nauki CSS . Jeśli znasz się na JavaScript, ale nigdy wcześniej nie używałeś jQuery, zapoznaj się z naszym podstawowym przewodnikiem po jQuery .

1. Pierwsze kroki

Ten pokaz slajdów wymaga kilku funkcji:

Wsparcie dla obrazów
Kontrolki do zmiany obrazów
Podpis tekstowy
Tryb automatyczny

Wydaje się, że jest to prosta lista funkcji. Tryb automatyczny automatycznie przeniesie obrazy do następnego w sekwencji. Oto przybliżony szkic, który zrobiłem przed napisaniem jakiegokolwiek kodu:

Jeśli zastanawiasz się, po co zawracać sobie głowę planowaniem, spójrz na te najgorsze błędy programistyczne w historii. Ten projekt nikogo nie zabije, ale ważne jest, aby dobrze zrozumieć kod i procedury planowania przed rozpoczęciem pracy nad większym kodem — nawet jeśli jest to tylko wstępny szkic.

Oto początkowy kod HTML, którego potrzebujesz, aby rozpocząć. Zapisz to w pliku o odpowiedniej nazwie, na przykład index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Oto jak wygląda kod:

To trochę śmieci, prawda? Rozłóżmy to, zanim to ulepszymy.

Ten kod zawiera „standard” HTML , głowa , styl , scenariusz , oraz ciało Tagi. Te części są niezbędnymi elementami każdej strony internetowej. JQuery jest dołączany za pośrednictwem Google CDN – jak dotąd nic wyjątkowego ani specjalnego.

Wewnątrz ciała znajduje się div z identyfikatorem showContainer . Jest to opakowanie lub pojemnik zewnętrzny do przechowywania pokazu slajdów. Poprawisz to później za pomocą CSS. Wewnątrz tego kontenera znajdują się trzy bloki kodu, każdy o podobnym przeznaczeniu.

Klasa nadrzędna jest zdefiniowana z nazwą klasy imageContainer :

Służy do przechowywania pojedynczego slajdu — obraz i podpis są przechowywane w tym kontenerze. Każdy pojemnik ma unikalny identyfikator, składający się z postaci w_ i numer. Każdy pojemnik ma inny numer, od jednego do trzech.

Ostatnim krokiem jest przywołanie obrazu, a podpis jest przechowywany w div z oznaczeniem podpis klasa:

Dog

Stworzyłem swoje obrazy z nazwami plików numerycznych i zapisałem je w folderze o nazwie Obrazy . Możesz nazwać swój, jak chcesz, pod warunkiem, że zaktualizujesz kod HTML, aby pasował.

Jeśli chcesz mieć więcej lub mniej obrazów w pokazie slajdów, po prostu skopiuj i wklej lub usuń bloki kodu za pomocą imageContainer klasy, pamiętając o aktualizacji nazw plików i identyfikatorów zgodnie z wymaganiami.

Na koniec tworzone są przyciski nawigacyjne. Umożliwiają one użytkownikowi poruszanie się po obrazach:

 ❮  
 ❯

Te encja HTML Kody służą do wyświetlania strzałek do przodu i do tyłu, podobnie jak działają czcionki ikon .

2. CSS

Teraz, gdy podstawowa struktura jest na swoim miejscu, nadszedł czas, aby to wyglądać piękny . Oto jak będzie wyglądać po tym nowym kodzie:

Dodaj ten CSS między swoim styl tagi:

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;  
}

Teraz wygląda to o wiele lepiej, prawda? Rzućmy okiem na kod.

Używam przykładowych obrazów, które są wszystkie 670 x 503 piksele , więc ten pokaz slajdów został zaprojektowany głównie wokół obrazów tego rozmiaru. Jeśli chcesz używać obrazów o innym rozmiarze, musisz odpowiednio dostosować CSS. Zalecam zmianę rozmiaru obrazów do odpowiednich rozmiarów — różne obrazy o różnych wymiarach spowodują problemy ze stylizacją.

Bardzo tego CSS jest oczywiste. Jest kod, który definiuje rozmiar kontenera do przechowywania obrazów, wyśrodkowuje wszystko, określa czcionkę, a także kolor przycisku i tekstu. Jest kilka stylów, z którymi wcześniej mogłeś nie mieć do czynienia:

kursor: wskaźnik -- Spowoduje to zmianę kursora ze strzałki na wskazujący palec po przesunięciu kursora nad przyciski.
krycie: 0,65 -- Zwiększa to przejrzystość przycisków.
wybór użytkownika: brak -- Dzięki temu nie można przypadkowo podświetlić tekstu na przyciskach.

Możesz zobaczyć wynik większości tego kodu w przyciskach:

Najbardziej złożoną częścią jest ta dziwnie wyglądająca linia:

.imageContainer:not(:first-child) {

Może to wyglądać dość nietypowo, ale jest to dość oczywiste.

Po pierwsze, celuje w dowolne elementy z imageContainer klasa. ten :nie() składnia mówi, że wszystkie elementy w nawiasach powinny być wyłączony z tego stylu. Wreszcie :pierworodny składnia mówi, że ten CSS powinien kierować na dowolny element pasujący do nazwy ale zignoruj pierwszy element. Powód tego jest prosty. Ponieważ jest to pokaz slajdów, wymagany jest tylko jeden obraz na raz. Ten CSS ukrywa wszystkie obrazy oprócz pierwszego.

3. JavaScript

Ostatnim elementem układanki jest JavaScript. To jest logika, która sprawia, że pokaz slajdów działa poprawnie.

Dodaj ten kod do swojego scenariusz etykietka:

$(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;  
 }  
 }  
});

Może się to wydawać sprzeczne z intuicją, ale zamierzam pominąć początkowe bloki kodu i przejść od razu do wyjaśnienia kodu od połowy -- nie martw się, wyjaśnię cały kod!

Musisz zdefiniować dwie zmienne. (Oto jak definiować zmienne w JavaScript .) Te zmienne mogą być traktowane jako główne zmienne konfiguracyjne dla pokazu slajdów:

var currentImage = 1;  
var totalImages = 3;

Przechowują one całkowitą liczbę obrazów w pokazie slajdów oraz numer obrazu, od którego należy zacząć. Jeśli masz więcej zdjęć, po prostu zmień totalImages zmienna do całkowitej liczby obrazów, które masz.

Dwie funkcje zwiększ obraz oraz zmniejsz obraz przesuwać się lub cofać aktualne zdjęcie zmienny. Czy ta zmienna powinna być niższa niż jeden, czy wyższa niż totalImages , zostanie zresetowany do jednego lub totalImages . Dzięki temu pokaz slajdów zostanie zapętlony, gdy dobiegnie końca.

Wróćmy do kodu na początku. Ten kod „celuje” w następny i poprzedni przycisk. Kliknięcie każdego przycisku powoduje wywołanie odpowiedniego zwiększać lub zmniejszać metody. Po zakończeniu po prostu znika obraz na ekranie i znika na nowym obrazie (zgodnie z aktualne zdjęcie zmienny).

ten zatrzymać() Metoda jest wbudowana w jQuery. To anuluje wszystkie oczekujące wydarzenia. Gwarantuje to, że każde naciśnięcie przycisku jest płynne i oznacza, że nie masz 100 naciśnięć przycisków, które czekają na wykonanie, jeśli trochę zwariujesz na myszy. ten zanikanie (1) oraz zanikanie(1) metody powodują pojawianie się lub zmniejszanie obrazów zgodnie z wymaganiami. Liczba określa czas trwania zanikania w milisekundach. Spróbuj zmienić to na większą liczbę, na przykład 500. Większa liczba powoduje dłuższy czas przejścia. Jeśli jednak posuniesz się za daleko, możesz zacząć dostrzegać dziwne zdarzenia lub „migotanie” między zmianami obrazu. Oto pokaz slajdów w akcji:

Automatyczne postępy

Ten pokaz slajdów wygląda teraz całkiem nieźle, ale potrzebny jest jeszcze ostatni szlif. Automatyczne zaawansowanie to funkcja, która naprawdę sprawi, że ten pokaz slajdów zabłyśnie. Po określonym czasie każdy obraz automatycznie przejdzie do następnego. Użytkownik może jednak nadal poruszać się do przodu lub do tyłu.

przesyłaj pliki z Maca do Windows 10

To łatwa praca z jQuery. Należy utworzyć licznik czasu, który będzie wykonywał Twój kod co x sekundy. Jednak zamiast pisać nowy kod, najłatwiej jest emulować „kliknięcie” przycisku następnego obrazu i pozwolić, aby istniejący kod wykonał całą pracę.

Oto nowy kod JavaScript, którego potrzebujesz — dodaj go po zmniejsz obraz funkcjonować:

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

Niewiele się tu dzieje. ten okno.setInterval Metoda będzie regularnie uruchamiać fragment kodu, zgodnie z czasem określonym na końcu. Czas 2500 (w milisekundach) oznacza, że pokaz slajdów będzie postępował co 2,5 sekundy. Mniejsza liczba oznacza, że każdy obraz będzie się rozwijał w szybszym tempie. ten Kliknij Metoda powoduje, że przyciski uruchamiają kod tak, jakby użytkownik kliknął przycisk myszą.

Jeśli jesteś gotowy na kolejne wyzwanie związane z JavaScriptem, spróbuj zbudować witrynę za pomocą statycznego narzędzia do tworzenia witryn, takiego jak GatsbyJS, lub architektury frontonu, takiej jak Vue . Jeśli uczysz się Rubiego, Jekyll jest również opcją. Oto jak Jekyll i GatsbyJS radzą sobie ze sobą .

Źródło zdjęcia: Tharanat Sardsri za pośrednictwem Shutterstock.com

Udział Udział Ćwierkać E-mail 8 najlepszych stron internetowych do pobierania audiobooków za darmo

Audiobooki są doskonałym źródłem rozrywki i są znacznie łatwiejsze do strawienia. Oto osiem najlepszych stron internetowych, z których można je pobrać za darmo.

Czytaj dalej Powiązane tematy

Programowanie
JavaScript
Projektowanie stron

O autorze Joe Coburn(136 opublikowanych artykułów)

Joe jest absolwentem informatyki na Uniwersytecie w Lincoln w Wielkiej Brytanii. Jest profesjonalnym programistą, a kiedy nie lata dronami ani nie pisze muzyki, często można go spotkać wykonującego zdjęcia lub produkującego filmy.

Więcej od Joe Coburna

Zapisz się do naszego newslettera

Dołącz do naszego newslettera, aby otrzymywać porady techniczne, recenzje, bezpłatne e-booki i ekskluzywne oferty!

Kliknij tutaj, aby zasubskrybować