JavaScripti slaidiseanss koos funktsioonidega

• Aprill 23, 2024

Varasemates artiklites koostasime ja lihtsustasime JavaScripti slaidiseanssi. See slaidiseanss on täiesti funktsionaalne ja kuvab isegi midagi sobivat inimestele, kellel pole JavaScripti, kuid sooviksin, et praegu kuvatava pildi pisipilt näeks teistest pisipiltidest erinev. Olin otsustanud kasutada praegust CSS-id, mis tegi pildid poolläbipaistvaks ja lisas valitud pisipildile õhukese punase ääre. Oma viimases artiklis sain ma selle käitumise algselt valitud pisipildiga, kuid uue pisipildi valimisel uus pisipilt ei muutunud ja algne pisipilt säilitas valitud stiili.

Kui slaidiseansi eelmises versioonis kasutaja klõpsab pisipilti, kuvatakse sellega seotud suured pildid. Ma soovin, et see muudaks suure pildi, seadistaks eelnevalt valitud pildi pisipildi tagasi normaalseks ja teeks selle pisipildi valitud pildi jaoks erilise stiiliga. Kuna ma teen nüüd pisipildil klõpsamisega mitu asja, lülitasin kogu oma koodi panemise selle saidi onClicki atribuuti img sildi funktsiooni kasutamiseks. JavaScripti funktsioonid lähevad tavaliselt sisse pea HTML-i sektsiooni, nii et need laaditakse ja kui leht on laaditud, siis need on valmis. Neid saab sisestada otse vahele skript sildid või panna ja fail ja kaasa. Lühikeste programmide jaoks või aktiivselt kodeerides on mul lihtsam oma kood otse lehele panna, nagu ma siin tegin.

Oleksin võinud kasutada funktsiooni iga pisipildi jaoks, kuid kuna kõik, mis muutub pisipiltidelt pisipiltideks, on pildi nimi ja pisipildi id (ja id kasutasin pildi nime), siis kirjutasin ühe funktsiooni, mis võttis id argumendina ja kasutas seda sobiva pildi nime loomiseks, lisades sellele ".jpg". Kutsusin oma funktsiooni displayLarge.

funktsioon displayLarge (id) {
// muuda suurt pilti
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// seada eelmise pisipildi stiil tagasi vaikeseadele
document.getElementById ("praegune"). id = oldID;
// märkige id enne, kui seda muudame
oldID = id
// märkige pisipilt praeguse stiiliga praeguseks
document.getElementById (id) .id = "praegune";
}

Selleks, et see funktsioon esimest korda tööle hakkaks, pidin andma ka esialgse määratluse vanaID, muutuja, mida kasutan praegu valitud pisipildi algse ID mäletamiseks. Kogu see kood läheb veebilehe päisesse, nii et see laaditakse enne lehe laadimist.

Lõpuks muutsin oma funktsiooniks pisipiltide HTML-i. Minu slaidiseansi HTML näeb nüüd välja selline:











Selle koodi toimivat näidet näete siit.

Video Juhiseid: To Do List App in JavaScript [beginners] (Aprill 2024).