Álló diaképek bemutatója

Amikor gyakorlunk, a most látott böngésző ablakának felső részén, megjelenik egy figyelmeztető szöveg, a biztonság érdekében.
A beállítások megjelenítéséhez kattintson, ide felírat.
Ilyenkor a megjelenő ablakban a blokkolt tartalom engedélyezése szövegre kell kattintani, hogy programunk a gyakorlás alatt is működjön.

További képek megtekintéséhez, kattintsunk a képre. Öt kép kerül bemutatásra.

Fix diabemutató ismertetése.

Ha a html programot azelőtt töltjük be, hogy elkészítenénk a JavaScrip fájlt, az oldalon mind az öt kép megjelenik.
A JavaScript program azokat a képeket keresi, melyek a class: slide azonosítóhoz tartoznak, így különbözteti meg azon képektől melyek nem a bemutatóhoz, tartoznak a html lapunkon.
A diák olyan sorrendben jelennek meg, ahogy azt a html lapon megírtuk.

A képek megjelenítéséhez három fájlt készítünk:
• html fájl, melyben megírjuk egy adott div szakaszban a képbehívó utasításokat.
• JavaSkript fájl, mely váltogatja a képeket, és megjeleníti olyan sorrendben, ahogy azt a html lapon megírtuk.
• css fájl, mely a div szakasz azonosítójához megírt meghatározások alapján, weblapunk adott területére mozgatja a div szakaszt és vele együtt a képeket is.

Html lap képeket tároló része

<div id="kepek">
<img class="slide" src="kep1.jpg" width="400" height="300">
<img class="slide" src="kep2.jpg" width="400" height="300">
<img class="slide" src="kep3.jpg" width="400" height="300">
<img class="slide" src="kep4.jpg" width="400" height="300">
<img class="slide" src="kep5.jpg" width="400" height="300">
</div>

JavaScript.
A MakeSlideShow() rendezi diabemutatóba a képeket.
A NextSlide() a kattintásokra reagál, és a bemutató képet a következőre helyezi.

A program első sorai, három globális változót határoznak meg:

• numslides a diák aktuális számát tárolja.
• currentslide az aktuális diát
• slides tömb a diához tartozó image objektumokat

A MakeSlides() függvény a getElementsByTagName () segítségével megkeresi az összes képet, majd egy for ciklussal bejárja a tömböt.
A ciklus első if utasítása, megvizsgálja a kép className jellemzőjét, és ha a kép nem a slide osztályba tartozik, a ciklus békén hagyja, és továbblép.

className jellemző: A képhez rendelt egyedi azonosító név, mely a class osztályazonosítóhoz van rendelve.
Jelen esetben html - lapunkon az img, azaz minden kép a slide azonosító elnevezést kapta.

A következő utasítások a képet a slides tömbbe helyezik.
Majd megnézik, hogy a numslides értéke nulla-e, ami az első képet jelenti, a tömbben.
Az első kép display jellemzőjét block-ra állítja, a többiét pedig none-ra.
Így egyszerre csak egy kép lesz látható.

A ciklus utolsó utasításai a kép onclick eseménykezelőjeként beállítják a NextSlide() függvényt, és növeli a numslides változó értékét.

A NextSlide() függvény először elrejti az aktuális diát, a kép display tulajdonságának none-re állításával, majd növeli a currentslide értékét.
Amikor az utolsó diára kattintunk, az if utasítás visszaállítja a currentslide - ót nullára.
Az új diák megjelenítése a display tulajdonság block-ra állításával történik.

A program utolsó sora az ablak onLoad eseménykezelőjeként beállítja a MakeSlideShow() függvényt, hogy az, az oldal betöltésekor lefusson, és nyomban diabemutatóba rendezze a képeket.

Megjegyzés:
Az oldal betöltésekor:
- Engedélyezni kell a JavaScript működését, melyre egy figyelmeztetés jelenik meg.
- Rövid felvillanást láthatunk, és mind az öt kép megjelenhet, mielőtt a program elrejtené azokat.
Ezt kiküszöbölhetjük, ha a slide osztályhoz adjuk a display: none CSS szabályt.
Így minden kép láthatatlan marad, amíg a program meg nem jeleníti az első diát.

JavaScrip program

var numslides=0, currentslide=0;
var slide=new Array( ) ;
function MakeSlideShow( ) {
// megkeresünk minden slide osztályú képet
imgs=document .getElementsByTagName ("img") ;
for (i=0 ; i < imgs.length; i++) {
if ( imgs [ i ] .className != "slide") continue ;
slide [numslides]=imgs [ i ];

// az els kivételével elrejtünk minden képet
if (numslides==0) {
imgs [ i ].style,display="block" ;
} else {
imgs [ i ].style.display="none" ;
}
imgs [ i ].onclick=NextSlide ;
numslides++ ;
} // a for ciklus vége
} // a MakeSlideShow ( ) vége
function NextSlide ( ) {
slide [currentslide].style.display="none";
currentslide++ ;
if (currentslide >= numslides) currentslide=0;
slide [currentslide] .style.display="block" ;
}
// a diabemutató létrehozása az oldal betöltésekor
window.onload=MakeSlideShow ;