Prezentare de diapozitive JavaScript cu funcții

• Mai 3, 2024

În articolele anterioare am creat și am făcut câteva ajustări fine într-o prezentare de diapozitive JavaScript foarte simplă. Această prezentare de diapozitive este complet funcțională și chiar afișează ceva potrivit pentru persoanele care nu au JavaScript, dar aș dori ca imaginea pe care o afișează în prezent să arate diferit de celelalte miniaturi. M-am hotărât să folosesc un id CSS numit „curent” care făcea imagini semi-transparente și adăugasem un chenar roșu subțire pentru miniatura selectată. În ultimul meu articol, am obținut acest comportament pentru miniatura selectată inițial, dar când am selectat o miniatură nouă, noua miniatură nu s-a schimbat, iar miniatura inițială a păstrat stilul selectat.

În versiunea anterioară a prezentării mele de diapozitive, când un utilizator face clic pe o miniatură, sunt afișate imaginile mari asociate. Ce vreau să fac este să schimb imaginea mare, să setați miniatura imaginii selectate anterior pentru a reveni la normal și a face această afișare de miniaturi cu stilul special pentru imaginea selectată. Deoarece acum fac mai multe lucruri când faceți clic pe miniatură, am trecut de la a pune tot codul meu în atributul onClick al img etichetarea la utilizarea unei funcții. Funcțiile JavaScript intră de obicei în cap secțiunea HTML, astfel încât acestea să fie încărcate și gata când corpul paginii este încărcat. Fie pot fi inserate direct între scenariu etichete sau put și un fișier și inclus. Pentru programele scurte sau când codific activ, mi se pare mai ușor să-mi pun codul direct în pagină așa cum am făcut aici.

Aș fi putut folosi o funcție pentru fiecare miniatură, dar din moment ce tot ce se schimbă de la miniatură la miniatură este numele imaginii și id-ul miniatura (și am folosit numele imaginii pentru id), am scris o singură funcție care a luat id ca argument și a folosit-o pentru a crea numele imaginii corespunzătoare adăugând „.jpg” la acesta. Am sunat funcția mea displayLarge.

display displayLarge (id) {
// schimbați imaginea mare
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName.;
// setați stilul miniaturii anterioare la valoarea implicită
. Document.getElementById ( "curent") id = oldID;
// notează id-ul înainte de a-l schimba
oldID = id
// marcați miniatura ca curentă cu stilul curent
document.getElementById (id) .id = "curent";
}

Pentru ca această funcție să funcționeze prima dată, a trebuit să dau și o definiție inițială pentru oldID, variabila pe care o folosesc pentru a-mi aminti id-ul original al miniaturii selectat în prezent. Tot acest cod merge în secțiunea din cap a paginii web, astfel încât să fie încărcat înainte de încărcarea paginii.

În cele din urmă, am schimbat HTML-ul pentru ca miniaturile să-mi apeleze funcția. HTML pentru prezentarea mea de diapozitive arată acum astfel:











Puteți vedea un exemplu de lucru al acestui cod aici.

Instrucțiuni Video,: Cum se face un panou de administrare personalizat cu diferite funcții și servicii din Windows? (Mai 2024).