JavaScript diavetítés készítése 3 egyszerű lépésben

Ha elolvasta útmutatónkat hogyan készítsünk weboldalt , akkor azon tűnődhet, mit tegyen ezután készségei fejlesztése érdekében. Fényképes diavetítés készítése meglepően egyszerű feladat, és megtaníthat Önnek olyan értékes készségeket, amelyek szükségesek a programozói munka megszerzéséhez.

Ma megmutatom, hogyan lehet JavaScript -diavetítést készíteni a semmiből. Ugorjunk rögtön!

Előfeltételek

A kódolás megkezdése előtt tudnia kell néhány dolgot. Az Ön által választott megfelelő webböngésző és szövegszerkesztő mellett (ajánlom Magasztos szöveg ), szüksége lesz némi tapasztalatra HTML , CSS , JavaScript , és jQuery .

Ha nem vagy annyira biztos a képességeiben, akkor feltétlenül olvassa el a dokumentumobjektum -modell használatára vonatkozó útmutatónkat és ezeket a tippeket a CSS elsajátításához. Ha magabiztos a JavaScriptben, de még soha nem használta a jQuery -t, akkor tekintse meg a jQuery alapvető útmutatóját.

1. Első lépések

Ez a diavetítés számos funkciót igényel:

Képek támogatása
A képek megváltoztatásának vezérlőelemei
Szövegfelirat
Automatikus üzemmód

A funkciók egyszerű listájának tűnik. Az automatikus mód automatikusan továbbítja a képeket a sorozat következő sorába. Íme a durva vázlat, amit a kód írása előtt készítettem:

Ha kíváncsi arra, miért zavarja a tervezést, akkor nézze meg ezeket a történelem legrosszabb programozási hibáit. Ez a projekt nem öl meg senkit, de elengedhetetlen, hogy alaposan megértsük a kódot és a tervezési eljárásokat, mielőtt nagyobb kódon dolgozunk - még akkor is, ha ez csak egy durva vázlat.

Itt van az első HTML, amelyre szüksége van a kezdéshez. Mentse ezt egy megfelelő nevű fájlba, például index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Így néz ki a kód:

Kicsit szemét, nem? Bontsuk le, mielőtt javítanánk.

Ez a kód 'standard' -t tartalmaz HTML , fej , stílus , forgatókönyv , és test címkék. Ezek a részek minden weboldal alapvető elemei. JQuery szerepel a Google CDN -en keresztül - eddig semmi egyedi vagy különleges.

A test belsejében egy div azonosítóval showContainer . Ez egy csomagolóanyag vagy külső tároló a diavetítés tárolására. Ezt később a CSS segítségével javítani fogja. Ebben a tárolóban három kódblokk található, mindegyik hasonló céllal.

A szülőosztály osztálynévvel van definiálva imageContainer :

Ez egyetlen dia tárolására szolgál - a kép és a felirat ebben a tárolóban található. Minden tároló egyedi azonosítóval rendelkezik, amely karakterekből áll ban,-ben_ és egy szám. Minden tartálynak különböző száma van, egytől háromig.

Utolsó lépésként egy kép hivatkozik, és a felirat egy div -ben tárolódik a felirat osztály:

Dog

A képeimet numerikus fájlnevekkel hoztam létre, és egy ún Képek . Bármilyennek nevezheti a magáét, feltéve, hogy frissíti a HTML -t.

Ha több vagy kevesebb képet szeretne megjeleníteni a diavetítésben, egyszerűen másolja és illessze be vagy törölje a kódblokkokat a imageContainer osztály, ne felejtse el szükség szerint frissíteni a fájlneveket és azonosítókat.

Végül létrejönnek a navigációs gombok. Ezek lehetővé teszik a felhasználó számára, hogy navigáljon a képek között:

 ❮  
 ❯

Ezek HTML entitás A kódok az előre és hátra mutató nyilak megjelenítésére szolgálnak, hasonlóan az ikon betűtípusok működéséhez.

2. A CSS

Most, hogy a központi szerkezet a helyén van, itt az ideje, hogy látsszon szép . Így fog kinézni az új kód után:

Add hozzá ezt a CSS -t a sajátodhoz stílus címkék:

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

Ez most sokkal jobban néz ki ugye? Nézzük meg a kódot.

Mindegyik mintaképet használok 670 x 503 képpont , így ezt a diavetítést többnyire ekkora képek köré terveztük. Ha más méretű képeket szeretne használni, megfelelően módosítania kell a CSS -t. Javaslom, hogy méretezze át képeit a megfelelő méretűre - a különböző méretű, különböző méretű képek stílusproblémákat okozhatnak.

A legtöbb ennek a CSS -nek magától értetődő. Van egy kód, amely meghatározza a tároló méretét a képek tárolására, mindent középre igazít, megadja a betűtípust, valamint a gomb és a szöveg színét. Van néhány stílus, amellyel talán még nem találkozott:

kurzor: mutató - Ezzel a kurzort nyílról mutatóujjra változtatja, ha a kurzort a gombok fölé viszi.
opacitás: 0,65 - Ez növeli a gombok átláthatóságát.
user-select: nincs - Ez biztosítja, hogy véletlenül ne emelje ki a gombok szövegét.

A legtöbb kód eredményét a gombokban láthatja:

A legbonyolultabb rész itt ez a furcsa kinézetű sor:

.imageContainer:not(:first-child) {

Elég szokatlannak tűnhet, de meglehetősen magától értetődő.

Először is minden elemet megcéloz a imageContainer osztály. Az :nem() A szintaxis szerint a zárójelben lévő elemeknek meg kell lenniük kizárt ebből a stílusból. Végül a :első gyerek A szintaxis azt állítja, hogy ennek a CSS -nek minden, a névnek megfelelő elemet meg kell céloznia de figyelmen kívül hagyja az első elemet. Ennek oka egyszerű. Mivel ez egy diavetítés, egyszerre csak egy képre van szükség. Ez a CSS elrejti az összes képet, kivéve az elsőt.

3. A JavaScript

A rejtvény utolsó darabja a JavaScript. Ez a logika a diavetítés helyes működéséhez.

Add hozzá ezt a kódot a sajátodhoz forgatókönyv címke:

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

Lehet, hogy ellentétes intuitívnak tűnik, de átugorom a kezdeti kódblokkokat, és félúton egyenesen a kód magyarázatához kezdek-ne aggódjon, elmagyarázom az összes kódot!

Két változót kell definiálnia. (Az alábbiakban definiáljuk a változókat a JavaScriptben.) Ezek a változók a diavetítés fő konfigurációs változóinak tekinthetők:

var currentImage = 1;  
var totalImages = 3;

Ezek tárolják a diavetítés összes képét és a kezdeni kívánt kép számát. Ha több képe van, egyszerűen módosítsa a totalImages változhat a rendelkezésre álló képek teljes számához képest.

A két funkció növekedésImage és csökkenésKép előre vagy visszavonulni currentImage változó. Ha ez a változó egynél alacsonyabb vagy magasabb, mint totalImages , visszaáll az egyikre vagy totalImages . Ez biztosítja, hogy a diavetítés ciklusba kerül, amint eléri a végét.

Vissza a kódhoz az elején. Ez a kód a következő és az előző gombokat célozza meg. Ha rákattint az egyes gombokra, akkor meghívja a megfelelőt növekedés vagy csökken mód. Ha elkészült, egyszerűen elhalványítja a képernyőn megjelenő képet, és elhalványul az új képen (a currentImage változó).

Az álljon meg() metódus a jQuery -be van építve. Ezzel törli a függőben lévő eseményeket. Ez biztosítja, hogy minden gombnyomás zökkenőmentes legyen, és azt jelenti, hogy nincs 100 gombnyomás, amelyek mindegyike a végrehajtásra vár, ha kissé megőrül az egérrel. Az fadeIn (1) és fadeOut (1) módszerek szükség szerint be- vagy kikapcsolják a képeket. A szám ezredmásodpercben adja meg az elhalványulás időtartamát. Próbálja meg ezt nagyobb számra, például 500 -ra módosítani. A nagyobb szám hosszabb átmeneti időt eredményez. Menjen azonban túl messzire, és furcsa eseményeket vagy „villogásokat” láthat a képváltozások között. Íme a diavetítés működés közben:

Automatikus haladás

Ez a diavetítés most nagyon jól néz ki, de van még egy utolsó simítás. Az automatikus haladás olyan funkció, amely valóban ragyogóvá teszi ezt a diavetítést. Egy meghatározott idő elteltével minden kép automatikusan továbblép a következőre. A felhasználó azonban továbbra is navigálhat előre vagy hátra.

hozzon létre egy indítható usb -t az iso -ból

Ez egyszerű feladat a jQuery segítségével. Időzítőt kell létrehozni a kód minden egyes végrehajtásához x másodperc. Az új kód írása helyett azonban a legegyszerűbb, ha egy kattintást emulál a következő kép gombra, és hagyja, hogy a meglévő kód végezze el a munkát.

Itt van az új JavaScript, amire szüksége van - adja hozzá ezt a csökkenésKép funkció:

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

Itt nem sok minden történik. Az window.setInterval metódus rendszeresen futtat egy kódrészletet, ahogy azt a végén megadott idő határozza meg. Az idő 2500 (ezredmásodpercben) azt jelenti, hogy ez a diavetítés 2,5 másodpercenként halad előre. A kisebb szám azt jelenti, hogy minden kép gyorsabban halad előre. Az kattintson metódus úgy aktiválja a gombokat, hogy a kódot úgy futtassák, mintha a felhasználó az egérrel kattintott volna a gombra.

Ha készen áll a következő JavaScript-kihívásra, próbáljon meg egy webhelyet statikus webhely-készítővel, például a GatsbyJS-sel, vagy egy olyan kezelőfelülettel, mint a Vue. Ha Ruby tanuló vagy, Jekyll is egy lehetőség. Így néz ki Jekyll és GatsbyJS egymás ellen.

Képhitel: Tharanat Sardsri a Shutterstock.com -on keresztül

Részvény Részvény Csipog Email A 8 legjobb webhely, ahonnan ingyenesen letölthetők hangoskönyvek

A hangoskönyvek nagyszerű szórakoztató források, és sokkal könnyebben emészthetők. Íme a nyolc legjobb webhely, ahonnan ingyenesen letöltheti őket.

Olvassa tovább Kapcsolódó témák

Programozás
JavaScript
Web Design

A szerzőről Joe Coburn(136 megjelent cikk)

Joe az Egyesült Királyságban, a Lincoln Egyetemen végzett informatikából. Professzionális szoftverfejlesztő, és amikor nem repül drónokkal és nem ír zenét, gyakran előfordul, hogy fényképeket készít vagy videókat készít.

Joe Coburn további alkotásai

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide