Létrehozása diavetítés a weboldal

Ha web-designer, és ez volt, hogy hozzon létre egy képsorozatot követik egymást útján átmeneti hatás, akkor itt veszem a bátorságot, hogy felajánlja az egyik módja annak, hogy végre az ötlet.

Először is, szükségünk van a címke . amelyben mind a kép változás fog bekövetkezni. Src tulajdonságát ezt a címkét rendelni a neve az első fájl diasorozatok, valamint az id tulajdonság címkével azonosított név slaid. A példánkban ez a következőképpen fog kinézni:

Most van szükség, amelynek segítségével a CSS, meghatározza, hogy milyen szűrőt kell használni az átmeneti képek között. A mi esetünkben ez a következő:

Láthatjuk, hogy a címke beállított szűrőt blendTrans (sima átmenetet) időtartamával paraméterrel (időtartam) egyenlő három másodpercig.

Ezután a változó hosszúságú típusú tömb négy elemből:

var img_array = new Array (4);

A következő a kódot, amely felelős betöltésével az összes diák kezdete előtt a diavetítés:

img_array [n] = new Image ();

Mivel a fájlok neveit, hogy tárolja a diakép, különböznek csak a sorozatszámot, a folyamat a betöltés lehet helyezni a hurok. A hurok teste az első kifejezés a paranccsal új kép () létrehoz egy objektum típusú kép (image) és hozzárendeli az aktuális elem a tömbben.

Ezt követi a kifejezést:

Ez azért szükséges, mert a tömb elemei nulla alapú, és a fájl számozás kezdődik egy.

Mivel az objektum típusú fényképek tulajdonságokkal korábban létrehozott teljes mértékben összhangban van a címke . majd a segítségével az utolsó kifejezés a hurok teste src tulajdonság az objektum van rendelve a fájl nevét.

Miután az összes kép lett betöltve a felhasználói memória, akkor kezdődik, hogy végre az átmenet a kettő között. Ehhez írunk a következő függvényt:

Az i változó. előtt kijelentette funkció szerepét játssza a tömb index és az alapértelmezett 1.

Az első nyilatkozat a funkciót nagyjából lefordított magyar nyelv az alábbiak szerint: „Call az Apply () metódus a nulla szűrőt a kép a tárgy nevét slaid”. Ez a módszer a „befagy” az éppen látható képet, és lehetővé teszi, hogy módosítsa a paramétereket az átmeneti és a kép is, anélkül, hogy azonnali alkalmazása az átmenet.

A második sorban src tulajdonság az objektum kép hozzá van rendelve az érték az aktuális elem a tömb src tárgyak képei letöltéséhez.

A harmadik sor lejátszás () módszerrel lehet végrehajtani a átmenetet.

Feldolgozás majd folytatja a következő tömb elem növeli a tömb index eggyel. Ezt követően az index képest négy és ha az összehasonlítás eredménye igaz (TRUE), akkor az index vissza.

Most már csak meg kell hívni a függvényt setInterval () függvénnyel. A példánkban ez így néz ki:

Ez a funkció végzi a műveletet, vagy egy másik funkciója, átadták az első argumentum minden alkalommal résen keresztül egyenlő a második paraméter, amely kifejezett milliszekundum. Esetünkben doFilter () függvény végrehajtása négy másodperc.

Akkor ne felejtsd el, hogy zárja be a kulcsszó