JavaScript slaidrāde ar funkcijām

• Maijs 2, 2024

Iepriekšējos rakstos mēs izveidojām un nedaudz pielāgojāmies ļoti vienkāršai JavaScript slaidrādei. Šis slaidrāde ir pilnībā funkcionējoša, un tajā pat tiek parādīts kaut kas piemērots cilvēkiem, kuriem nav JavaScript, taču es vēlētos, lai pašreiz redzamā attēla sīktēls izskatās atšķirīgs no citiem sīktēliem. Es biju izvēlējusies izmantot CSS id, ko sauc par “pašreizējo”, kas attēlus padarīja puscaurspīdīgus un izvēlētajam sīktēlam pievienoja plānu, sarkanu apmali. Iepriekšējā rakstā es saņēmu šādu uzvedību sākotnēji atlasītajam sīktēlam, bet, kad atlasīju jaunu sīktēlu, jaunais sīktēls nemainījās, un sākotnējais sīktēls saglabāja izvēlēto stilu.

Iepriekšējā slaidrādes versijā, kad lietotājs noklikšķina uz sīktēla, tiek parādīti saistītie lielie attēli. Tas, ko es gribu, ir mainīt lielo attēlu, iestatīt iepriekš atlasītā attēla sīktēlu, lai tas atgrieztos normālā stāvoklī, un padarīt šo sīktēlu ar izvēlētā attēla īpašo stilu. Tā kā tagad, kad ir noklikšķināts uz sīktēla, es daru vairākas lietas, es pārslēdzos no visa mana koda ievietošanas onClick atribūtā img tagu, lai izmantotu funkciju. JavaScript funkcijas parasti notiek galva HTML sadaļa, lai, ielādējot lapas pamattekstu, tie tiktu ielādēti un gatavi. Tos var ievietot tieši starp skripts tagi vai put un fails un iekļauts. Īsām programmām vai aktīvi kodējot, man ir vieglāk ievietot kodu tieši lapā, kā es to darīju šeit.

Es būtu varējis izmantot funkciju katram sīktēlam, bet, tā kā viss, kas mainās no sīktēla uz sīktēlu, ir attēla nosaukums un sīktēla ID (un id es izmantoju attēla nosaukumu), es uzrakstīju vienu funkciju, kas paņēma id kā arguments un to izmantoja, lai izveidotu atbilstošu attēla nosaukumu, pievienojot tam “.jpg”. Es nosaucu savu funkciju displayLarge.

funkcija displayLarge (id) {
// mainīt lielo attēlu
imageName = id + ".jpg";
document.getElementById ("largeImage"). src = imageName;
// iestatiet iepriekšējā sīktēla stilu atpakaļ uz noklusējuma vērtību
document.getElementById ("current"). id = oldID;
// pierakstiet ID, pirms to mainām
oldID = id
// atzīmējiet sīktēlu kā pašreizējo ar pašreizējo stilu
document.getElementById (id) .id = "pašreizējais";
}

Lai šī funkcija darbotos pirmo reizi, man arī bija jāsniedz sākotnējā definīcija oldID, mainīgais, kuru izmantoju, lai atcerētos sākotnēji atlasītā sīktēla ID. Viss šis kods tiek ievietots Web lapas galviņas sadaļā, tātad tas tiek ielādēts pirms lapas ielādes.

Visbeidzot, es nomainīju sīktēlu HTML, lai izsauktu manu funkciju. Mana slaidrādes HTML tagad izskatās šādi:











Darbīgu šī koda piemēru varat redzēt šeit.

Video Instrukcijas: meteor.js by Roger Zurawicki (Maijs 2024).