Csúsztattott 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.
Vannak böngésző programok, melyek a biztonság érdekében, minden alkalomkor kérik az engedélyeztetést.
További képek megnézéséhez, kattintsunk a képre! Öt diaképet láthatunk.
A html - lapunk, diaképeket tartalmazó div szakasza
<div id="diakepek">
<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>
A js, azaz JavaSkript fájl tartalma
var numslides=0;
var currentslide= 0, oldslide= 4;
var x= 0 ;
var slides = 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 ;
slides [numslides] = imgs [ i ] ;
// Képek egymásra helyezése, legfelül az elsőkép.
if (numslides== 0 ) {
imgs [ i ] .style.zIndex=10;
} else {
imgs [ i ] .style.zIndex=0;
}
imgs[ i ] .onclick=NextSlide;
numslides++;
} // a for ciklus vége
} // a MakeSlideShow ( ) vége
function NextSlide ( ) {
// Aktuális dia áthelyezése, hogy az új dia alatt legyen.
slides [currentslide].style.zIndex= 9;
// Előző dia legalulra helyezése.
slides [ oldslide ].style.zIndex=0 ; oldslide = currentslide ; currentslide++;
if (currentslide >=numslides) currentslide = 0 ;
// Kezdés a jobb szélen.
slides [currentslide] .style .left= 400; x= 400;
// Új dia felülre helyezése.
slides [currentslide] .style .zIndex=10; AnimateSlide ( ) ; }
function AnimateSlide ( ) {
// Kép mozgása: alacsony érték esetén lassabb, magas érték esetén gyorsabb.
x= x - 4;
slides [currentslide].style .left= x;
// Előz kép elhagyja a baloldal szélét, vagy fixen marad és rácsúszik a következő.
// Hogy melyik hatást szeretnénk alkalmazni, ez a következő sortól függ, megjegyzésbe tesszük vagy sem.
// slides [oldslide].style.left= x-400;
// Ísmétlés, amíg a nulladik diához ér.
if ( x > 0 ) window.setTimeout ("AnimateSlide ( ) ; " ,10 ) ; }
// Diabemutató létrehozása, az oldal betőltésekor.
window.onload = MakeSlideShow;
A css, azaz stíluslap tartalma
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; margin: 0; background-color: #ccc; }
#container { width: 770px; margin-top: 10px; margin-right: auto; margin-left: auto; padding:10px;}
h1 {text-align: center; margin-top:5px; margin-bottom:5px;}
A következő két sor határozza meg, a div szakasz és mozgókép tulajdonságait.
#diakepek { position: relative; overflow: hidden; width: 400px; height: 300px; margin-left: 200px; }
img.slide { position: absolute; left: 0px; top: 0px; }
--------------------------------------------------------------------------
Megjegyzés:
Az overflow: hidden elrejti a képnek azon részét, mely kívül esik a div szakaszon
Az img .slide { position: absolute; meghatározás jelentése: Kép a szülőjéhez, azaz az adott div szakaszhoz igazodik
---------------------------------------------------------------------------
Csúsztatott dia ismertetése
A html lap
A képek egy div szakaszban vannak elhelyezve, div szakasz azonosítója: diakepek
A html lap fejlécében szerepel a javascript fájl és css fájl behívó utasítás.
A képek class osztályazonosítóhoz rendelt neve, jelen esetben slide.
Mindenki tetszés szerinti azonosítóval láthatja el saját képeit, de akkor azon azonosító szót kell alkalmazni mindhárom fájlban. ( html, js, és css fájlban)
Css fájl.
Beállítja a képek kezdeti helyzetét, illetve gondoskodik róla a helyzetmegadó tulajdonságokkal, hogy az animáció működjön.
#diakepek azonosítóhoz rendelt meghatározások alakítják a div szakasz stílusát.
A position: releative szabállyal engedélyezzük az elem, illetve a gyermekei helyzetének szabályozását.
Alapértelmezés szerint pedig azon a helyen hagyjuk, ahol egyébként is lenne az oldalon.
Az overflow: hidden, elrejti a képnek azon részét mely a div szakaszon kívül található.
A width és height értékeivel akkorára állítjuk a div szakasz méreteit, amekkorák a képek.
Az img.slide, képeknek a stílusát adja meg.
A position: absolute, ami a div szakasznál alkalmazott relative értékkel együtt azt jelenti, hogy a kép helye a szülőjéhez igazodik.
A beállítás left: 0; és top: 0; a képeket a div szakasz bal felső sarkába helyezi el, ezért csak az egyik látható.
A display tulajdonság helyett a JavaScript zIndex szabályozza e tulajdonságot, hogy az egymásra helyezett képek közül melyik legyen felül.
Diaváltás úgy történik, hogy a program a kupac tetejére, de a div szakasz jobb szélére helyezi az új képet, majd fokozatosan balra úsztatja mind az előző, mind az új diát, amíg már csak az új kép látszik.
JavaScript.
Szerepel két új globális változó:
Az oldslide, melyben az előző diát tároljuk, hogy kiúsztathassuk azt, amikor új diát jelenítünk meg.
Az X mely az átúszó kép vízszintes helyzetét tartalmazza.
A MakeSlideShow ( ) függvény a zIndex tulajdonságot állítja be: az első kép értéke 10, a többié 0 lesz. (Ez helyettesíti a display tulajdonságot.)
A NextSlide ( ) függvény máskép működik.
Először a zIndex tulajdonságát 9-re állítja, hogy az a második legyen a kupacban.
Ezt követően az előző diát zIndex –ének 0-ra állításával legalulra helyezi, majd beállítja az oldslide értékét, és növeli az aktuális diát, tároló változót, ahogy korábban is tette.
A NextSlide ( ) függvény azzal fejezi be tevékenységét, hogy az új dia left tulajdonságát, illetve az x változó értékét 400-ra állítja.
A dia így a div szakasz jobb széléről indul, majd fokozatosan balra úszik.
Végül 10-re állítja az új dia zIndex-ét, hogy a kupac tetejére helyezze, és meghívja az áttűnésről gondoskodó AnimateSlide() függvényt.
Az animációt az AnimateSlide() függvény kezeli.
Azzal kezdi, hogy 25-öt kivon az x értékéből, és az aktuális dia left tulajdonságát erre az értékre állítja.
Ez után az előző diát 400 képponttal balra helyezi el a jelenlegitől, így az kiúszik a képből, ahogy az új dia megjelenik.
Az AnimateSlide() utólsó sora megvizsgálja az x értéket, és ha az még nem érte el a nullát, a setTimeout() segítségével rövid ( 10 ezredmásodperces ) késleltetés után újra meghívja magát.
A függvény addig hívódik meg újra és újra, amíg az új dia el nem éri végleges helyét a baloldalon.
Megjegyzés:
Az előző dia zIndex-ét azért állítjuk 9-re és nem 10-re, hogy másik áttűnési hatást is kipróbálhassunk.
Ha eltávolítjuk az AnimáteSlide() -ból a slides[oldstyle].style.left értékadást, az előző dia a helyén marad, miközben az új dia föléúszik.
// Előz kép, elhagyja a baloldal szélét, vagy fixen marad és rácsúszik a következő
// Hogy melyik hatást szeretnénk alkalmazni, ez a következő sortól függ, megjegyzésbe tesszük vagy sem.
// JavaSkript fájlban a megjegyzés jele: A sor elején látható, jobbra dőlő kettős perjel
// slides [oldslide].style.left= x-400;
Betöltés után, a bemutató elindításához kattintsunk az első képre.
Az AnimateSlide() függvény kódja elég hosszú, de egy viszonylag gyors gépen az áttűnés nagyon gyors lesz( talán fél másodperc).
Ha lassítani szeretnénk, módosítsuk a 25 értéket alacsonyabbra. Az 1-es érték nagyon lassú áttűnést eredményez.