Hogyan hozhat létre diavetítést a javascripten, a keresőmotor promócióján és a webhelyek létrehozásán, a wordpress órákon
Üdvözlet neked, kedves barátaim! Ebben a kis leckében megmutatom, hogyan lehet a legegyszerűbb módon létrehozni a diavetítést!
Galériánkban a kép megváltoztatásakor egy kis effektet használunk, nevezetesen: a kép áttetszőségének megváltoztatása!
Egyszerű Html kód:
Itt minden nagyon egyszerű - a slágerlistán lévő blokkban az első kép lesz.
De valójában a fent említett osztály stílusai:
Állítsa be a szélességet és igazítsa a blokkot a középpontba.
Először egy képfájlokat tartalmazó képregisztert írunk le. Ha galéria képeket szeretne hozzáadni, törölni vagy módosítani, akkor egyszerűen cserélje le az ebben a tömbben található hivatkozásokat - semmi mást nem kell megváltoztatni!
A változó image_num a képszámláló. Amikor megérkezünk a tömb utolsó képére, visszaállítjuk ezt a változót, hogy újraindítsuk a műsort az első képből (hurkolás).
A következő a dia funkció, amely megvalósítja az oldalfordítást - ez történik (lépések):
- készítsen egy képet a blokkról az osztály diavetítéssel;
- 40% -os átláthatóvá tétele (ez 500 milliszekundumban történik);
- majd módosítsa a kép src attribútumát (módosítsa a képre mutató linket, vegye át a képfájlból);
- Ezután a képet áttetszővé tesszük (ez 500 milliszekundumban is megtörténik).
Mint már mondtam, IMAGE_NUM változó - a számláló, amit össze a hossza a tömb (vagyis a képek számát részt vesz a diavetítés), és ha IMAGE_NUM egyenlő a maximális értéket, akkor nulla belőle.
A dia funkció 3 másodpercenként (3000 ezredmásodperc), intervallummal (setInterval) működik, ami azt jelenti, hogy a képeket 3 másodpercenként lefelé forgatják.
Mint látható, nincs semmi bonyolult!
Ez az, az új leckék előtt, bye!