CSS ile JavaScript Slayt Gösterisi

• Mayıs Ayı 7, 2024

Önceki bir makalede çok basit bir JavaScript slayt gösterisi oluşturduk. Bu slayt gösterisi tamamen işlevseldir ve hatta JavaScript'i olmayan kişiler için uygun bir şey görüntüler, ancak web sitem için sahip olmak istediğim tüm özelliklere sahip değil. Özellikle, şu anda görüntülemekte olduğum görüntünün küçük resminin bir şekilde diğer küçük resimlerden farklı görünmesini istiyorum. Stiller bunu başarmanın iyi bir yolu olduğundan, mevcut HTML'imdeki tüm özellikleri CSS'ye dönüştürerek başlayacağım.

Önce mevcut stilimi CSS kullanmak için dönüştürdüm. CSS'yi bilmiyorsanız, denemeye başlamanın en kolay yolu onu stil HTML belgenizin başındaki etiketler. İlk etiket, tarayıcıya ne tür bir stil bilgisi kullandığınızı bildirmek için bir tür özelliğine ihtiyaç duyar, bu nedenle şöyle görünmelidir:



CSS'ye ilk dönüşüm kolaydı çünkü yalnızca büyük resmin stil bilgileri vardı ve zaten İD JavaScript amaçları için kullanılan özellik.

#largeImage {
sınır: 2 piksel düz siyah;
genişlik: 544 piksel;
yükseklik: 408 piksel;
}

Daha önce küçük resimler için boyutlandırma bilgileri eklememiştim, ancak adında bir sınıf ekledim başparmak ve boyutu 40 piksel x 40 piksel olarak ayarlamak için bu sınıftaki resim etiketlerini ayarlayın. Bu, küçük resimler için çok büyük veya küçük görüntüler yanlışlıkla yüklesem bile, küçük resim boyutunda görüntülenmeye zorlanacakları anlamına gelir.

img.thumbs {
sınır: yok;
genişlik: 40 piksel;
yükseklik: 40 piksel;
}

Ayrıca bir slayt gösterisi Tüm slayt gösterisini tutmak için sınıf. Bu, istediğim takdirde kenarlık eklemek veya tüm slayt gösterisi için arka plan rengini değiştirmek gibi şeyler yapmamı sağlayacak. Bu noktada sadece büyük görüntünün yüksekliğine maksimum yüksekliği ayarlamak için kullanıyorum, çünkü daha fazla küçük resim eklediğimde, büyük görüntünün üzerinde hareket etmek yerine yanlarında kalmasını istiyorum. Ne yazık ki, Internet Explorer maksimum yükseklik özelliğini desteklemediğinden, bu konuda daha sonra çalışmam gerekecek.

.slideshow {
yükseklik: 408 piksel;
maksimum yükseklik: 408 piksel;
}

Sonunda seçilen küçük resim için bir stil oluşturdum. Seçilen küçük resmimin yarı saydam olmasını ve dar kırmızı kenarlık olmasını istediğime karar verdim. Bir seferde yalnızca bir görüntü seçileceğinden, bu amaçla "current" adlı bir kimlik kullanmaya karar verdim. CSS kullanmanın avantajı, kodu değiştirmeden herhangi bir zamanda nasıl görüneceğini değiştirebilmemdir. Stil şöyle görünür:

img # akımı {
kenarlık: 1 piksel düz kırmızı;
Filtre: alfa (opaklık = 50);
-moz opasite: 0.5;
opaklık: 0.5;
}

Burada tarayıcı farklılıklarını tekrar ele almak için bazı kodlar görüyoruz, bir opaklık öğesi kullanmak için standart çağrılar, ancak hem IE hem de Mozilla tabanlı tarayıcılar henüz bunu desteklemiyor.

Son olarak, stilleri kullanmak ve 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:









JavaScript'imizi değiştirmedik, bu yüzden slayt gösterisi hala çalışıyor, ancak şimdi daha fazla stilimiz var ve sunumumuz HTML ve JavaScript'imizden ayrıldı. Bununla birlikte, bir sorunumuz var, başlangıçta seçilen küçük resim kırmızı bir kenarlıkla yarı şeffafken, görüntüleri değiştirdiğimizde bu şekilde kalıyor. Bunu düzeltmek için eski arkadaş JavaScript'imize geri dönmeliyiz.

Kodun şimdiye kadar çalışan bir örneğini burada görebilirsiniz.

Video Talimatları: How to create slideshow/carousel using HTML, CSS and JavaScript | Part-01/05 (Mayıs Ayı 2024).