Egyszerű diavetítés jquery
Példa egy slide show látható honlapunkon a bal oldali oszlopban (PS3 hírek).
Először hozzunk létre egy html kódot, a lehető legkönnyebben. Először, hogy egy konténer div id = »diavetítés». amelyben tesszük képet.
Megjegyzés: a class = »aktív». Ez az osztály fogja mondani a forgatókönyvet, hogy ez a kép legyen látható azonnal, akkor is, ha ki van kapcsolva a böngészőben JS.
Most leírjuk a CSS stílusokat, amelyek leírják a helymeghatározás kép egymáshoz képest, és hogy a kép az aktív Summit z-index:
Itt készül az abszolút pozicionálás és azonosítani tartály magassága diavetítés (#slideshow). Ezen túlmenően vegye figyelembe azt a tényt, hogy hoztunk létre három különböző z-index - fogjuk manipulálni őket a jQuery.
Animálni egy diavetítés fogjuk váltani a képeket egyesével. Ehhez levelet funkció, amely megjelenik egy új képet a tetején a tevékenység:
Ezután meg kell, hogy megszűnt a képet:
Alkalmazzuk a Class „utolsó aktív”, amelyben a Z-index = 9, ami csökkenti a kép alatt «aktív«. És akkor, hogy átlátszó azáltal homály, hogy 0 és használata animálni () függvény nem halványul el. Most egy kérelmet (callback), hogy távolítsa el a z-index osztályok az előző képet, amikor az animáció (animálni ()) megszűnik.
Bár a diavetítés már jól működik, azt kell, hogy még biztonságosabbá egyes meghatározó változók között alapértelmezettre. Ehhez határozza meg az alapértelmezett aktív képet. És animáció ismétlés.
Először határozza meg az alapértelmezett kép a változó $ aktív, ami ebben az esetben legyen az utolsó kép a blokk. Ez annak a ténynek köszönhető, hogy a alapján abszolút pozicionálás, az utolsó kép jelenik meg a tetején, és el kell kezdeni vele, ha el akarjuk kerülni a villogás.
Ha azt szeretnénk, hogy javítsa ezt a funkciót, próbálja játszani a sebesség az animáció. Ezen kívül ebben a diavetítés, akkor könnyen konvertálni a DIV támogatása helyett IMG.
adományoz
Ne mondja, hogy ha a kép különböző méretű, az előző kandikál. Hogyan tudom kijavítani? Pont. szüksége van) Előre is köszönöm.
Alex, megadhat egy fix méretű képek, vagy mint egy lehetőséget, hogy végre ezt mind div'ax.