Hozzon létre egy egyszerű JavaScript diavetítés nélkül jquery, javascript
Ha nem használja a könyvtárat, az oldal jobban működik (mivel kevesebb kód), és lehet helyezni létrehozhat egy slide show sehova, nem kell aggódni, hogyan kell letölteni a további fájlokat.
Egyszerű diavetítés
A HTML-ben van szükségünk egy tartályt, hogy csúszik, és a lapokat magukat. Itt van, hogyan nézne ki:
Itt van, hogyan fog kinézni a CSS kernel:
Most van egy alap diavetítés.
Megjegyzés a kompatibilitás:
CSS átmeneteket nem támogatja az IE verziók 9. és alatt. Ezek a böngészők elhalványul fokozatosan, hanem a hatása feloldjuk a diavetítés, amely bemutatja a következő dia.
UX és a rendelkezésre állás
Vegyünk például egy diavetítés rontja a tapasztalat felhasználói interakció és a honlap elérhetőségét.
Slideshow elrejtheti fontos tartalmat
Fontos információk nem lehet kimenet segítségével a diavetítés. Egy tanulmány szerint a University of Notre Dame, csak 1,07% -a kattintottak a felhasználók bármely elem vagy diavetítést. És 1,07%, ezek közül csak egy kis része (3% vagy kevesebb), rákattint egy dia, kivéve az első. Ez azt mutatja, milyen veszélyes hely fontos tartalmat a diavetítés.
A felhasználó kap egy torzított képet a fő cél az oldalon
A site kell nyújtani a felhasználó számára egyértelmű és kézenfekvő módja az, hogy mit tegyen. És ha diavetítés megakadályozza ezt, meg kell, hogy vizsgálja felül a stratégia ezt az oldalt.
A cég szakemberei WiderFunnel. optimalizálja átalakítás, hatékonyságának tesztelése a diavetítés, és jött a következő következtetésre jut:
Nem egyszer teszteltük a forgó javaslatot, és arra a következtetésre jutott, hogy ez egy rossz módon mutatja tartalmat.
A mobil felhasználók nem elégedett
Mikor kell használni a diavetítés
Ha ez tényleg megéri, hogy megjelenjen a diavetítés? Íme néhány javaslat.
Hozzon létre egy közös élmény
Ha nem érdekel, hogy a felhasználó figyelni a tartalmát bármilyen egyedi csúszda, de meg kell, hogy hozzon létre egy általános vizuális benyomást. Ehhez a diavetítés lehet, megfelelő.
Ha ez a mennyiség könnyen elérhető és nem diavetítés
Például a fotók a központban, múzeum, esemény vagy termékcsalád formájában a diavetítés. De ha a helyén van egy fotóalbum vagy katalógus oldalán. Ebben az esetben célszerű használni a diavetítés.
Az általános minőségének javítására oldalon
Használja a slide show, mint egy ügyes vizuális elem, amely nem kritikus a funkcionális hely. Mindaddig, amíg ez a kiegészítés nem vonja el a figyelmet a fontos tartalmat, minden rendben.
Pointerek, hogy növelje a rendelkezésre álló
Ahhoz, hogy diavetítés vált megfizethető, akkor adjunk hozzá egy kevés ellenőrzéseket.
Hozzáadása ellenőrzések slideshow
"Pause / Play" gombot
Először is, adjunk hozzá egy gombot a HTML:
Íme a diavetítés fog működni a szünet gombot:
A gombok a „Next” és „Vissza”
Először add HTML „Tovább” gombra, és „Vissza”:
..., hogy ez megváltozzon:
A fenti script, van hozzá több rugalmasságot a teljes funkció goToSlide. Azt is megváltozott a matematikai belül változó currentSlide. hogy megszüntesse a negatív számokat. Kipróbálni magát, válassza ki a számot slides.length, hogy mi történik a currentSlide után n változásokat.
Most már van egy működő ellenőrzéseket.
Itt van egy diavetítés a vezérlők és néhány további stílusok:
Tudod is megpróbál változtatni a stílusát, és a kezelőszervek elrendezése, hogy céljuk az volt egyértelmű a felhasználók számára.
Változás az osztály .slide ingatlan position: absolute; állásba: statikus;. Így alapesetben a lemezeket egy listában jelennek meg.