Fonksiyonlu JavaScript Slayt Gösterisi

• Mayıs Ayı 15, 2024

Önceki makalelerde, çok basit bir JavaScript slayt gösterisinde bazı ince ayarlamalar yaptık ve yaptık. Bu slayt gösterisi tamamen işlevsel ve hatta JavaScript'i olmayan kişiler için uygun bir şey görüntülüyor, ancak şu anda görüntülemekte olduğum resmin küçük resminin diğer küçük resimlerden farklı görünmesini istiyorum. Görüntüleri "yarı saydam" yapan ve seçilen küçük resim için ince bir kırmızı kenarlık ekleyen "current" adlı bir CSS kimliği kullanmaya karar verdim. Son yazımda, başlangıçta seçilen küçük resim için bu davranışı aldım, ancak yeni bir küçük resim seçtiğimde, yeni küçük resim değişmedi ve ilk küçük resim seçilen stili korudu.

Slayt gösterimin önceki sürümünde, bir kullanıcı küçük resmi tıklattığında, ilişkili büyük görüntüler görüntülenir. Yapmasını istediğim şey, büyük görüntüyü değiştirmek, önceden seçilen görüntünün küçük resmini normale dönecek şekilde ayarlamak ve bu küçük resim görüntüsünü seçilen görüntü için özel stille yapmak. Küçük resim tıklandığında artık birden çok şey yaptığım için, tüm kodumu img işlevini kullanarak etiketleyin. JavaScript işlevleri genellikle kafa sayfasının gövdesi yüklendiğinde yüklenecek ve hazır olacak şekilde HTML bölümüne bakın. Ya doğrudan arasına yerleştirilebilir senaryo etiketleri veya koymak ve bir dosya ve dahil. Kısa programlar için veya aktif olarak kod yazarken, kodumu burada yaptığım gibi doğrudan sayfaya koymayı daha kolay buluyorum.

Her küçük resim için bir işlev kullanmış olabilirim, ancak küçük resimden küçük resme değişen her şey resmin adı ve küçük resmin kimliği olduğundan (ve kimlik için resim adını kullandım), id değişkenini bağımsız değişken olarak kullandık ve buna ".jpg" ekleyerek uygun resim adını oluşturmak için kullandım. Fonksiyonumu aradım displayLarge.

function displayLarge (id) {
// büyük resmi değiştir
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = ImageName.;
// önceki küçük resmin stilini varsayılana geri döndür
. Document.GetElementById ( "geçerli") id = oldID;
// değiştirmeden önce kimliği not edin
oldID = id
// küçük resmi geçerli stille geçerli olarak işaretle
Document.GetElementById (id) .id = "geçerli";
}

Bu işlevin ilk kez çalışması için, oldID, o anda seçili olan küçük resmin orijinal kimliğini hatırlamak için kullanıyorum değişken. Tüm bu kodlar web sayfasının baş bölümüne gider, böylece sayfa yüklenmeden önce yüklenir.

Son olarak, işlevimi çağırmak için küçük resimlerin HTML kodunu değiştirdim. Slayt gösterimin HTML'si şu şekilde görünüyor:











Burada bu kodun çalışan bir örneğini görebilirsiniz.

Video Talimatları: The "scroll" event in JavaScript | window.onscroll (Mayıs Ayı 2024).