Crearea unui slide show pe pagina web

Dacă web-designer si l-ai luat pentru a crea o serie de imagini se succed prin intermediul unui efect de tranziție, atunci aici am lua libertatea de a vă oferi o modalitate de a pune în aplicare ideea.

Pentru început, avem nevoie de tag-ul . în care se va produce atât schimbarea imaginii. Src proprietate a acestei etichete atribuie numele primului fișier în secvența de slide-uri, precum și folosind proprietatea id-ul este identificat prin numele tag-ul slaid. De exemplu nostru, va arăta după cum urmează:

Crearea unui slide show pe pagina web

Acum este necesar, cu ajutorul CSS, specifica ce filtru va fi utilizat pentru tranziția între imagini. În cazul nostru este următorul:

Puteți vedea că eticheta set blendTrans filtru (tranziție lină), cu o durată a parametrului (durată) egal cu trei secunde.

Apoi, variabila matrice tip lungime de patru elemente:

var img_array = new Array (4);

Următoarele este codul pe care este responsabil pentru încărcarea tuturor diapozitivelor înainte de începerea diapozitive:

img_array [n] = new Image ();

Deoarece numele fișierelor care stochează imaginea de diapozitive, diferă doar în numărul de serie, procesul de încărcare poate fi plasat în bucla pentru. Corpul buclei prima expresie cu comanda noua imagine () creează un obiect de tip imagine (imagine) și o atribuie elementului curent al șirului.

Aceasta este urmată de expresia:

Este necesar deoarece elementele de matrice sunt bazate pe zero, iar numerotarea începe cu unul.

Deoarece obiectul de tip de imagine cu proprietăți create anterior pe deplin, în conformitate cu tag-ul . apoi cu ajutorul ultimei expresie în corpul proprietății bucla src obiectului este atribuit numele fișierului.

După ce toate imaginile au fost încărcate în memoria de utilizator, puteți începe să pună în aplicare tranziția între ele. Pentru a face acest lucru, vom scrie următoarea funcție:

Variabila i. a declarat înainte de funcția joacă rolul indicelui matrice, și implicit este 1.

Prima declarație în funcția poate fi tradus aproximativ în limba română, în felul următor: „Apply () metoda filtrului la zero Apelați la imaginea obiectului cu numele slaid“. Această metodă de „îngheață“ imaginea vizibilă în prezent și vă permite să modificați parametrii tranziției și imaginea în sine, fără a fi necesară aplicarea imediată a tranziției.

În al doilea rând proprietatea src a imaginii obiectului i se atribuie valoarea elementului curent al matricei src imagini ale obiectelor preluate anterior.

Metoda a treia linie de redare () este folosit pentru a realiza o tranziție.

Procesarea continuă apoi la următorul element matrice prin creșterea indicelui matrice de unul. După aceea indicele este comparat cu patru și, dacă rezultatul comparația este adevărată (TRUE), atunci indicele este resetat.

Acum, avem nevoie doar pentru a apela funcția noastră cu funcția setInterval (). De exemplu nostru, se pare ca acest lucru:

Această funcție efectuează operațiunea, sau o altă funcție care a fost trecut la primul ei argument tot timpul printr-un decalaj egal cu al doilea parametru, care este exprimat în milisecunde. În cazul nostru funcția doFilter () se execută în patru secunde.

Atunci nu uitați să închidă o etichetă