Kako napraviti JavaScript SlideShow u 3 jednostavna koraka

Ako ste pročitali naš vodič dalje kako napraviti web stranicu , možda se pitate što dalje učiniti kako biste poboljšali svoje vještine. Izrada prezentacije fotografija iznenađujuće je jednostavan zadatak koji vas može naučiti vrijednim vještinama potrebnim za posao programiranja.

Danas ću vam pokazati kako izraditi JavaScript slideshow od nule. Uskočimo odmah!

Preduvjeti

Morat ćete znati nekoliko stvari prije nego počnete kodirati. Uz odgovarajući web preglednik i uređivač teksta po vašem izboru (preporučujem Uzvišeni tekst ), trebat će vam malo iskustva s tim HTML , CSS , JavaScript , i jQuery .

Ako niste toliko sigurni u svoje vještine, svakako pročitajte naš vodič za korištenje Objektnog modela dokumenta i ove savjete za učenje CSS -a. Ako ste sigurni u JavaScript, ali nikada prije niste koristili jQuery, pogledajte naš osnovni vodič za jQuery.

1. Početak

Ovaj slideshow zahtijeva nekoliko značajki:

Podrška za slike
Kontrole za promjenu slike
Naslov teksta
Automatski način rada

Čini se jednostavan popis značajki. Automatski način rada automatski će premjestiti slike na sljedeću u slijedu. Evo grube skice koju sam napravio prije nego što sam napisao bilo koji kod:

Ako se pitate zašto se truditi oko planiranja, pogledajte ove najgore programske pogreške u povijesti. Ovaj projekt neće nikoga ubiti, ali ključno je imati dobro razumijevanje koda i procedura planiranja prije rada na većem kodu - čak i ako je to samo gruba skica.

Evo početnog HTML -a koji vam je potreban za početak. Spremite ovo u datoteku s odgovarajućim imenom, kao što je index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Evo kako kôd izgleda:

Malo je smeće zar ne? Prekinimo prije nego što ga poboljšamo.

Ovaj kôd sadrži 'standard' HTML , glava , stil , skripta , i tijelo oznake. Ti su dijelovi bitne komponente svake web stranice. JQuery uključeno je putem Google CDN -a - dosad ništa jedinstveno ili posebno.

Unutar tijela nalazi se div s id -om showContainer . Ovo je omot ili vanjski spremnik za spremanje dijaprojekcije. Kasnije ćete to poboljšati pomoću CSS -a. Unutar ovog spremnika nalaze se tri bloka koda, svaki sa sličnom namjenom.

Roditeljska klasa definirana je imenom klase imageContainer :

Ovo se koristi za spremanje jednog slajda - slika i natpis pohranjeni su unutar ovog spremnika. Svaki spremnik ima jedinstveni ID koji se sastoji od znakova u_ i broj. Svaki spremnik ima drugačiji broj, od jedan do tri.

Kao posljednji korak, referencira se slika, a natpis se sprema u div s oznakom naslov razred:

Dog

Napravio sam svoje slike s numeričkim nazivima datoteka i pohranio ih u mapu pod nazivom Slike . Svoje možete nazvati kako god želite, pod uvjetom da ažurirate HTML tako da odgovara.

Ako želite imati više ili manje slika u prezentaciji, jednostavno kopirajte i zalijepite ili izbrišite blokove koda pomoću imageContainer klase, ne zaboravite ažurirati nazive datoteka i ID -ove prema potrebi.

Konačno, navigacijski gumbi su stvoreni. Oni omogućuju korisniku kretanje kroz slike:

 ❮  
 ❯

Ovi HTML entitet kodovi se koriste za prikaz strelica prema naprijed i natrag, na sličan način na koji funkcioniraju fontovi ikona.

2. CSS

Sada kada je jezgrena struktura postavljena, vrijeme je da to izgleda prilično . Evo kako će to izgledati nakon ovog novog koda:

Dodajte ovaj CSS između stil oznake:

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

To sad izgleda puno bolje, zar ne? Pogledajmo kod.

Koristim sve uzorke slika 670 x 503 piksela , pa je ovaj slideshow uglavnom osmišljen oko slika te veličine. Morat ćete prikladno prilagoditi CSS ako želite koristiti slike različite veličine. Preporučujem da promijenite veličinu slika u odgovarajuće veličine - različite slike različitih dimenzija uzrokovat će probleme s oblikovanjem.

Najviše ovog CSS -a je samo po sebi razumljivo. Postoji kôd za definiranje veličine spremnika za pohranu slika, poravnavanje svega po sredini, navođenje fonta, zajedno s gumbom i bojom teksta. Postoji nekoliko stilova na koje možda dosad niste naišli:

pokazivač: pokazivač - Time se kursor mijenja sa strelice u pokazivački prst kada kursor prelazite preko gumba.
neprozirnost: 0,65 - Time se povećava transparentnost gumba.
korisnički odabir: nema - To osigurava da ne možete slučajno označiti tekst na gumbima.

Rezultate većine ovog koda možete vidjeti u gumbima:

Najsloženiji dio ovdje je ova neobična linija:

.imageContainer:not(:first-child) {

Možda izgleda prilično neobično, no prilično je razumljivo.

Prvo, cilja sve elemente s imageContainer razred. The :ne() sintaksa navodi da svi elementi unutar zagrada trebaju biti isključen iz ovog stila. Konačno, : prvo dijete sintaksa navodi da bi ovaj CSS trebao ciljati bilo koji element koji odgovara imenu ali zanemariti prvi element. Razlog tome je jednostavan. Budući da je ovo prezentacija, potrebna je samo jedna slika odjednom. Ovaj CSS skriva sve slike osim prve.

3. JavaScript

Posljednji dio zagonetke je JavaScript. To je logika da se slajd -šou zaista pravilno funkcionira.

Dodajte ovaj kôd u svoj skripta označiti:

$(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žda se čini kontra-intuitivnim, ali preskočit ću početne blokove koda i odmah preći na objašnjenje koda od polovice-ne brinite, objašnjavam cijeli kôd!

Morate definirati dvije varijable. (Evo kako definirati varijable u JavaScriptu.) Ove se varijable mogu smatrati glavnim konfiguracijskim varijablama za dijaprojekciju:

var currentImage = 1;  
var totalImages = 3;

Oni pohranjuju ukupan broj slika u slideshowu i broj slike za početak. Ako imate više slika, jednostavno promijenite ukupne slike varijabla prema ukupnom broju slika koje imate.

Dvije funkcije povećatiSliku i smanjenjeSlike naprijed ili se povući currentImage promjenjivo. Treba li ova varijabla ići niže od jedan ili više od ukupne slike , resetira se na jedan ili ukupne slike . To osigurava da će se dijaprojekcija petljati kad dođe do kraja.

Natrag na kôd na početku. Ovaj kôd 'cilja' sljedeće i prethodne gumbe. Kada kliknete na svaki gumb, on poziva odgovarajuće povećati ili smanjenje metodama. Kad se dovrši, jednostavno izblijedjuje sliku na ekranu i blijedi na novoj slici (kako je definirano currentImage promjenjiva).

The Stop() metoda je ugrađena u jQuery. Time se poništavaju svi događaji na čekanju. To osigurava glatko svako pritiskanje gumba i znači da nemate 100 pritisaka gumba koji čekaju na izvršavanje ako pomalo poludite po mišu. The fadeIn (1) i fadeOut (1) metode povećavaju ili izbacuju slike prema potrebi. Broj određuje trajanje fade u milisekundama. Pokušajte to promijeniti na veći broj, na primjer 500. Veći broj rezultira dužim prijelaznim vremenom. Ipak, otiđite predaleko i možda ćete početi vidjeti čudne događaje ili 'treperenje' između promjena slike. Evo slideshowa na djelu:

Automatsko napredovanje

Ovaj slideshow sada izgleda prilično dobro, ali potreban je još jedan posljednji dodir. Automatsko napredovanje značajka je koja će ovaj slideshow doista zasjati. Nakon određenog vremenskog razdoblja, svaka će slika automatski preći na sljedeću. Međutim, korisnik se i dalje može kretati prema naprijed ili natrag.

prijenos datoteka s Mac -a na Windows 10

Ovo je jednostavan posao s jQueryjem. Potrebno je stvoriti mjerač vremena za izvršavanje vašeg koda svaki put x sekundi. Umjesto pisanja novog koda, najjednostavnije je oponašati 'klik' na gumb sljedeće slike i dopustiti postojećem kodu da odradi sav posao.

Evo novog JavaScripta koji vam je potreban - dodajte ga nakon smanjenjeSlike funkcija:

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

Ovdje se ne događa puno. The window.setInterval method će redovito izvoditi dio koda, kako je definirano vremenom navedenim na kraju. Vrijeme 2500 (u milisekundama) znači da će se ovaj slideshow unaprijediti svakih 2,5 sekunde. Manji broj znači da će svaka slika napredovati brže. The klik metoda pokreće gumbe za pokretanje koda kao da je korisnik kliknuo gumb mišem.

Ako ste spremni za svoj sljedeći JavaScript izazov, pokušajte izgraditi web mjesto sa statičnim graditeljem web stranica poput GatsbyJS-a ili prednjim okvirom poput Vue. Ako učite Ruby, Jekyll je također opcija. Evo kako se Jekyll i GatsbyJS snalaze jedan protiv drugog.

Kredit za sliku: Tharanat Sardsri putem Shutterstock.com

Udio Udio Cvrkut E -pošta 8 najboljih web stranica za besplatno preuzimanje audioknjiga

Zvučne knjige izvrstan su izvor zabave i mnogo ih je lakše probaviti. Evo osam najboljih web stranica na kojima ih možete besplatno preuzeti.

Pročitajte Dalje Povezane teme

Programiranje
JavaScript
Web dizajn

O autoru Joe Coburn(136 objavljenih članaka)

Joe je diplomirao računalne znanosti na Sveučilištu Lincoln, UK. On je profesionalni programer softvera, a kad ne leti bespilotnim letjelicama ili ne piše glazbu, često ga se može zateći kako fotografira ili proizvodi video zapise.

Više od Joea Coburna

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu