Un exemplu de prezentare de diapozitive poate fi văzut pe pagina principală a site-ului nostru în coloana din stânga (noul PS3).
Mai întâi, să creăm codul html cât mai ușor posibil. Mai întâi, faceți un container div cu id = "slideshow". în care vom pune imaginile noastre.
Observați clasa = "activă". Această clasă va spune script-ului că această imagine ar trebui să fie imediat vizibilă, chiar dacă este dezactivată în browser-ul JS.
Acum, să descriem stilurile CSS, în care descriem poziționarea imaginii relativ una față de cealaltă și facem imaginea activă la cel mai înalt nivel de z-index:
Aici am făcut o poziționare absolută și am determinat înălțimea containerului pentru prezentarea de diapozitive (#slideshow). De asemenea, rețineți că am creat trei z-indici diferiți - îi vom manipula cu jQuery.
Pentru a anima prezentarea de diapozitive, vom schimba imaginile la rândul lor. Pentru a face acest lucru, vom scrie o funcție care va afișa imaginea nouă pe cea activă:
Apoi, trebuie să facem dispariția imaginilor:
Aplicați clasa "last-active", în care z-indexul este 9, pentru a omite imaginea, sub "activ". Apoi faceți-o transparentă prin setarea opacității la 0 și utilizând funcția animate (), pentru a face o dispariție netedă. Și acum facem un apel invers pentru a șterge clasele z-index din imaginea anterioară, când animația (animate ()) este terminată.
Deși prezentarea noastră de diapozitive funcționează deja bine, trebuie să o facem mai fiabilă prin setarea valorilor implicite pentru unele variabile. Pentru a face acest lucru, definim imaginea activă în mod prestabilit. Și vom face o repetare a animației.
Mai întâi, definiți imaginea implicită pentru variabila activă $, care ar trebui să fie ultima imagine din bloc. Acest lucru se datorează faptului că, pe baza poziționării absolute, ultima imagine apare pe partea de sus și trebuie să începem de la aceasta, dacă vrem să evităm pâlpâirea.
Dacă doriți să îmbunătățiți această funcție, încercați să jucați cu viteza de animație. În plus, în această prezentare de diapozitive puteți să convertiți ușor suportul pentru DIV, în loc de IMG.
dona
Nu-mi spuneți dacă imaginile au dimensiuni diferite, atunci cele anterioare se uită. Cum se poate remedia aceasta? Pct. nevoie) Vă mulțumim anticipat.
Alex, poți seta fotografiile la o dimensiune fixă sau ca o opțiune de a le pune în aplicare pe toate.
Articole similare
Trimiteți-le prietenilor: