Salutări pentru dvs., dragi prieteni! În această lecție mică vă voi arăta cum puteți crea slide show-ul în modul cel mai simplu!
În galeria noastră, când schimbăm imaginea, vom folosi un efect mic, și anume - schimbarea transparenței imaginii!
Cod simplu Html:
Aici totul este foarte simplu - în blocul cu clasa de prezentare am pus imaginea care va fi prima.
Dar, de fapt, stilurile clasei menționate mai sus:
Setați lățimea și aliniați blocul în centru.
Mai întâi, este descris un array imagine_array care conține legături către imagini. Dacă trebuie să adăugați, să ștergeți sau să modificați imaginile galeriei, înlocuiți pur și simplu link-urile din această matrice - nimic altceva nu trebuie schimbat!
Imaginea variabilă variază ca numărător de imagini. Când ajungem la ultima imagine a matricei, resetăm această variabilă pentru a începe din nou spectacolul din prima imagine (looping).
Următoarea este funcția diapozitiv, care realizează întoarcerea paginii - aceasta se face în (pașii):
- a face o fotografie din bloc cu prezentarea de clasă;
- faceți-o transparentă de 40% (acest lucru se întâmplă în 500 de milisecunde);
- apoi modificați atributul src al imaginii (modificați linkul la imagine, luându-l din matricea image_array);
- Apoi, facem ca imaginea să fie opacă (acest lucru se întâmplă de asemenea în 500 de milisecunde).
Așa cum am spus mai devreme, variabila image_num este un contor, o comparăm cu lungimea matricei (adică cu numărul de imagini care participă la slide show) și dacă image_num este egală cu valoarea maximă, apoi zero.
Funcția diapozitiv este rulată la fiecare 3 secunde (3000 milisecunde) cu un interval (setInterval), ceea ce înseamnă că imaginile vor fi rotite la fiecare 3 secunde.
După cum puteți vedea, nu este nimic complicat!
Asta e, înainte de noile lecții, pa!
Articole similare
Trimiteți-le prietenilor: