3 Kolay Adımda JavaScript Slayt Gösterisi Nasıl Oluşturulur

hakkındaki kılavuzumuzu okuduysanız web sitesi nasıl yapılır , becerilerinizi geliştirmek için bundan sonra ne yapacağınızı merak ediyor olabilirsiniz. Bir fotoğraf slayt gösterisi yapmak şaşırtıcı derecede kolay bir iştir ve size bir programlama işi almak için gereken değerli becerileri öğretebilir.

Bugün size sıfırdan bir JavaScript slayt gösterisinin nasıl oluşturulacağını göstereceğim. Hemen atlayalım!

Önkoşullar

Kodlamaya başlamadan önce birkaç şeyi bilmeniz gerekir. Seçtiğiniz uygun bir web tarayıcısı ve metin düzenleyicisinin yanı sıra (tavsiye ederim Yüce metin ), biraz deneyime ihtiyacınız olacak HTML , CSS , JavaScript , ve jQuery .

Becerilerinize o kadar güvenmiyorsanız, Belge Nesne Modelini kullanma kılavuzumuzu ve CSS öğrenmek için bu ipuçlarını okuduğunuzdan emin olun. JavaScript'e güveniyorsanız ancak daha önce hiç jQuery kullanmadıysanız, jQuery ile ilgili temel kılavuzumuza göz atın.

1. Başlarken

Bu slayt gösterisi birkaç özellik gerektirir:

Görüntüler için destek
Görüntüleri değiştirmek için kontroller
Bir metin başlığı
Otomatik mod

Basit bir özellik listesi gibi görünüyor. Otomatik mod, görüntüleri otomatik olarak sıradaki bir sonrakine ilerletir. İşte herhangi bir kod yazmadan önce yaptığım kaba taslak:

Neden planlama zahmetine girdiğinizi merak ediyorsanız, tarihteki bu en kötü programlama hatalarına bir göz atın. Bu proje kimseyi öldürmeyecek, ancak daha büyük bir kod üzerinde çalışmadan önce sağlam bir kod ve planlama prosedürleri anlayışına sahip olmak çok önemlidir - sadece kaba bir taslak olsa bile.

İşte başlamak için ihtiyacınız olan ilk HTML. Bunu, aşağıdaki gibi uygun bir adla bir dosyaya kaydedin. index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

İşte kodun nasıl göründüğü:

Biraz çöp değil mi? İyileştirmeden önce onu parçalayalım.

Bu kod 'standart' içerir HTML , kafa , stil , senaryo , ve vücut etiketler. Bu parçalar, herhangi bir web sitesinin temel bileşenleridir. JQuery Google CDN aracılığıyla dahil edilmiştir -- şimdiye kadar benzersiz veya özel bir şey yoktur.

Vücudun içinde kimliği olan bir div var gösterKonteyner . Bu, slayt gösterisini saklamak için bir sarıcı veya dış kapsayıcıdır. Bunu daha sonra CSS ile geliştireceksiniz. Bu kapsayıcının içinde, her biri benzer bir amaca sahip üç kod bloğu vardır.

Bir üst sınıf, bir sınıf adıyla tanımlanır görüntüKonteyner :

Bu, tek bir slaydı saklamak için kullanılır -- bu kapsayıcının içinde bir resim ve resim yazısı saklanır. Her kapsayıcının karakterlerden oluşan benzersiz bir kimliği vardır. içinde_ ve bir numara. Her konteynerin birden üçe kadar farklı bir numarası vardır.

Son adım olarak, bir görüntüye başvurulur ve resim yazısı bir div içinde saklanır. altyazı sınıf:

Dog

Görüntülerimi sayısal dosya adlarıyla oluşturdum ve bunları Görüntüler . HTML'yi eşleşecek şekilde güncellemeniz koşuluyla, istediğiniz her şeyi arayabilirsiniz.

Slayt gösterinizde daha fazla veya daha az resim olmasını istiyorsanız, kod bloklarını kopyalayıp yapıştırın veya silin. görüntüKonteyner sınıf, dosya adlarını ve kimliklerini gerektiği gibi güncellemeyi unutmayın.

Son olarak, gezinme düğmeleri oluşturulur. Bunlar, kullanıcının görüntüler arasında gezinmesini sağlar:

 ❮  
 ❯

Bunlar HTML varlığı kodlar, simge yazı tiplerinin nasıl çalıştığına benzer şekilde, ileri ve geri okları görüntülemek için kullanılır.

2. CSS

Artık çekirdek yapı yerine oturduğuna göre, onu göstermenin zamanı geldi. güzel . Bu yeni koddan sonra şöyle görünecek:

Bu CSS'yi aranıza ekleyin stil etiketler:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

Bu şimdi çok daha iyi görünüyor değil mi? Şimdi koda bir göz atalım.

Hepsi olan örnek resimler kullanıyorum 670 x 503 piksel , bu nedenle bu slayt gösterisi çoğunlukla bu boyuttaki görüntüler etrafında tasarlanmıştır. Farklı boyutta resimler kullanmak istiyorsanız CSS'yi uygun şekilde ayarlamanız gerekir. Resimlerinizi eşleşen boyutlara göre yeniden boyutlandırmanızı öneririm - farklı boyutlardaki farklı resimler, stil sorunlarına neden olur.

Çoğu bu CSS kendi kendini açıklayıcıdır. Görüntüleri saklamak için kabın boyutunu tanımlamak, her şeyi ortalamak, yazı tipini, düğme ve metin rengiyle birlikte belirtmek için kod var. Daha önce karşılaşmamış olabileceğiniz birkaç stil var:

imleç: işaretçi -- Bu, imlecinizi düğmelerin üzerine getirdiğinizde imleci bir oktan bir işaret parmağına değiştirir.
opaklık: 0.65 -- Bu, düğmelerin şeffaflığını artırır.
kullanıcı seçimi: yok -- Bu, düğmelerdeki metni yanlışlıkla vurgulamamanızı sağlar.

Bu kodun çoğunun sonucunu düğmelerde görebilirsiniz:

Buradaki en karmaşık kısım, bu garip görünen çizgidir:

.imageContainer:not(:first-child) {

Oldukça sıradışı görünebilir, ancak oldukça açıklayıcıdır.

İlk olarak, herhangi bir öğeyi hedefler. görüntüKonteyner sınıf. NS :Olumsuz() sözdizimi, parantez içindeki herhangi bir öğenin olması gerektiğini belirtir hariç tutulan bu tarzdan. Son olarak, :ilk çocuk sözdizimi, bu CSS'nin adla eşleşen herhangi bir öğeyi hedeflemesi gerektiğini belirtir ancak ilk öğeyi görmezden gelin. Bunun nedeni basittir. Bu bir slayt gösterisi olduğundan, her seferinde yalnızca bir resim gereklidir. Bu CSS, ilki dışındaki tüm görüntüleri gizler.

3. JavaScript

Bulmacanın son parçası JavaScript'tir. Slayt gösterisi işlevini gerçekten doğru hale getirme mantığı budur.

bu kodu sitenize ekleyin senaryo etiket:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Sezgilere aykırı görünebilir, ancak ilk kod bloklarını atlayacağım ve doğrudan kodun yarısından itibaren açıklamaya atlayacağım - merak etmeyin, kodun tamamını açıklıyorum!

İki değişken tanımlamanız gerekir. (JavaScript'te değişkenleri nasıl tanımlayacağınız aşağıda açıklanmıştır.) Bu değişkenler, slayt gösterisi için ana yapılandırma değişkenleri olarak düşünülebilir:

var currentImage = 1;  
var totalImages = 3;

Bunlar, slayt gösterisindeki toplam görüntü sayısını ve başlatılacak görüntünün sayısını saklar. Daha fazla resminiz varsa, sadece toplamGörüntüler sahip olduğunuz toplam görüntü sayısına göre değişir.

iki işlev artırmakResim ve azalmaResim ilerlemek veya geri çekilmek Geçerli resim değişken. Bu değişken birden düşük mü yoksa daha mı yüksek olmalı? toplamGörüntüler , bire sıfırlanır veya toplamGörüntüler . Bu, slayt gösterisinin sona ulaştığında dönmesini sağlar.

Baştaki koda geri dönün. Bu kod, sonraki ve önceki düğmeleri 'hedefler'. Her düğmeye tıkladığınızda, uygun olanı çağırır. arttırmak veya azalmak yöntemler. Tamamlandığında, ekrandaki görüntüyü siler ve yeni görüntüde kaybolur. Geçerli resim değişken).

NS Dur() yöntem jQuery'de yerleşiktir. Bu, bekleyen etkinlikleri iptal eder. Bu, her bir düğmeye basışınızın sorunsuz olmasını sağlar ve fare üzerinde biraz delirirseniz, tüm basışların yürütülmesini bekleyen 100 düğmeniz olmadığı anlamına gelir. NS solmaya (1) ve karartma(1) yöntemler, görüntüleri gerektiği gibi soluyor veya solduruyor. Sayı, solma süresini milisaniye cinsinden belirtir. Bunu 500 gibi daha büyük bir sayıyla değiştirmeyi deneyin. Daha büyük bir sayı, daha uzun bir geçiş süresiyle sonuçlanır. Ancak çok ileri giderseniz, görüntü değişiklikleri arasında garip olaylar veya 'titremeler' görmeye başlayabilirsiniz. İşte eylemdeki slayt gösterisi:

Otomatik İlerleme

Bu slayt gösterisi şimdi oldukça iyi görünüyor, ancak son bir dokunuş gerekiyor. Otomatik ilerleme, bu slayt gösterisinin gerçekten parlamasını sağlayacak bir özelliktir. Belirli bir süre sonra her görüntü otomatik olarak bir sonrakine geçecektir. Bununla birlikte, kullanıcı yine de ileri veya geri gidebilir.

Windows 10 wifi'ye bağlanmayacak

Bu, jQuery ile kolay bir iştir. Kodunuzu her seferinde yürütmek için bir zamanlayıcı oluşturulması gerekir. x saniye. Bununla birlikte, yeni kod yazmak yerine yapılacak en kolay şey, bir sonraki görüntü düğmesine bir 'tıklamayı' taklit etmek ve tüm işi mevcut kodun yapmasına izin vermektir.

İşte ihtiyacınız olan yeni JavaScript -- bunu aşağıdakilerden sonra ekleyin: azalmaResim işlev:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Burada pek bir şey olmuyor. NS pencere.setInterval yöntem, sonunda belirtilen süreye göre tanımlandığı gibi düzenli olarak bir kod parçası çalıştırır. Zaman 2500 (milisaniye cinsinden), bu slayt gösterisinin her 2,5 saniyede bir ilerleyeceği anlamına gelir. Daha küçük bir sayı, her görüntünün daha hızlı ilerleyeceği anlamına gelir. NS Tıklayın yöntemi, bir kullanıcı fareyle düğmeyi tıklamış gibi kodu çalıştırmak için düğmeleri tetikler.

Bir sonraki JavaScript mücadelenize hazırsanız, GatsbyJS gibi statik bir web sitesi oluşturucu veya Vue gibi bir ön uç çerçeve ile bir web sitesi oluşturmayı deneyin. Bir Ruby öğrencisiyseniz, Jekyll da bir seçenektir. Jekyll ve GatsbyJS'nin birbirlerine karşı nasıl bir performans sergiledikleri aşağıda açıklanmıştır.

Resim Kredisi: Shutterstock.com aracılığıyla Tharanat Sardsri

Paylaş Paylaş Cıvıldamak E-posta Ücretsiz Sesli Kitap İndirmek için En İyi 8 Web Sitesi

Sesli kitaplar harika bir eğlence kaynağıdır ve sindirimi çok daha kolaydır. İşte onları ücretsiz olarak indirebileceğiniz en iyi sekiz web sitesi.

Sonrakini Oku İlgili konular

Programlama
JavaScript
Web Tasarım

Yazar hakkında Joe Coburn(136 Makale Yayınlandı)

Joe, İngiltere'deki Lincoln Üniversitesi'nden Bilgisayar Bilimleri mezunudur. Profesyonel bir yazılım geliştiricisi ve drone uçurmadığı veya müzik yazmadığı zamanlarda, genellikle fotoğraf çekerken veya video çekerken bulunabilir.

Joe Coburn'dan Daha Fazla

Haber bültenimize abone ol

Teknik ipuçları, incelemeler, ücretsiz e-kitaplar ve özel fırsatlar için bültenimize katılın!

Abone olmak için buraya tıklayın