İlan

Konusundaki 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 ve size öğretebilecek bir iştir programlama işi almak için gerekli değerli beceriler.

Bugün size sıfırdan nasıl bir JavaScript slayt gösterisi oluşturacağınızı göstereceğim. Hemen içeri girelim!

Ön şartlar

Kodlamaya başlamadan önce birkaç şeyi bilmeniz gerekir. Seçtiğiniz uygun bir web tarayıcısının ve metin düzenleyicisinin yanında (öneririm Yüce metin) ile ilgili biraz deneyim sahibi olmanız gerekir HTML, CSS, JavaScript, ve jQuery.

Becerilerinize çok güvenmiyorsanız, aşağıdaki kılavuzumuzu okuduğunuzdan emin olun. Belge Nesne Modelini kullanma JavaScript ve Web Geliştirme: Belge Nesne Modelini KullanmaBu makale size JavaScript'in birlikte çalıştığı belge iskeletini tanıtacaktır. Bu soyut belge nesnesi modeli hakkında bilgi sahibi olarak, herhangi bir web sayfasında çalışan JavaScript yazabilirsiniz. Daha fazla oku

ve bunlar CSS öğrenmek için ipuçları CSS Öğrenmenin ve Tek Başına CSS Büyücüsü Olmanın 5 AdımıCSS, web sayfalarının son on yılda gördüğü en önemli değişikliktir ve stil ile içeriğin ayrılmasına yol açtı. Modern bir şekilde, XHTML semantik yapıyı tanımlar ... Daha fazla oku . JavaScript'ten eminseniz, ancak daha önce hiç jQuery kullanmadıysanız, jQuery için temel rehber Javascript Programcıları için JQuery Temel KılavuzuBir Javascript programcısıysanız, JQuery'nin bu kılavuzu bir ninja gibi kodlamaya başlamanıza yardımcı olacaktır. Daha fazla oku .

1. Başlangıç

Bu slayt gösterisi birkaç özellik gerektirir:

  1. Görüntüler için destek
  2. Görüntüleri değiştirme kontrolleri
  3. Bir metin başlığı
  4. Otomatik mod

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

kod planlama

Planlamayı neden rahatsız ettiğinizi merak ediyorsanız, bu en kötü durumlara bir göz atın tarihte programlama hataları Tarihin En Kötü 10 Programlama HatasıHikâye ettiği geçmişte, kodlama da yıkımı imha etti. Biraz kötü kodun oluşması büyük bir felakete neden oldu. Aşağıdakiler tarihteki en kötü 10 programlama hatasıdır. Daha fazla oku . Bu proje kimseyi öldürmeyecek, ancak büyük bir kod üzerinde çalışmadan önce kod ve planlama prosedürlerini sağlam bir şekilde anlamak çok önemlidir - sadece kaba bir taslak olsa bile.

Başlamak için ihtiyacınız olan ilk HTML. Bunu, aşağıdaki gibi uygun bir ada sahip bir dosyaya kaydedin index.html:

MUO Slayt Gösterisi
fırıldak
Bitki
Köpek

Kod şöyle görünür:

öğretici ilk web sayfası

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

Bu kod “standart” içeriyor HTML, kafa, stil, senaryo, ve vücut etiketleri. Bu parçalar herhangi bir web sitesinin temel bileşenleridir. JQuery Google üzerinden eklenir CDN - şimdiye kadar benzersiz veya özel bir şey yok.

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

Üst sınıf, sınıf adıyla tanımlanır imageContainer:

Bu, tek bir slayt depolamak için kullanılır - bu kabın içinde bir resim ve resim yazısı saklanır. Her kapsayıcı, karakterlerden oluşan benzersiz bir kimliğe sahiptir ben_ ve bir sayı. Her kabın bir ile üç arasında farklı bir numarası vardır.

Son adım olarak, bir resme referans verilir ve resim yazısı, altyazı sınıf:

Köpek.

Görüntülerimi sayısal dosya adlarıyla oluşturdum ve bunları şu adlı bir klasörde sakladım: Görüntüler. HTML'yi eşleşecek şekilde güncellemeniz koşuluyla, istediğiniz herhangi bir şeyi arayabilirsiniz.

Slayt gösterinizde daha fazla veya daha az resim olmasını istiyorsanız, kod bloklarını kopyalayıp yapıştırmanız veya silmeniz yeterlidir. imageContainer sınıfında, dosya adlarını ve kimlikleri gerektiği gibi güncelleştirmeyi unutmayın.

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

Bunlar HTML varlığı kodları, ileri ve geri oklarını, simge yazı tipleri nasıl çalışır Simge yazı tipleri siteniz için harika: İşte nedenBugün size simge yazı tiplerinin ne olduğunu ve web sitenizi canlandırmak için nasıl kullanabileceğinizi göstereceğim. Daha fazla oku .

2. CSS

Çekirdek yapı yerinde olduğuna göre, şimdi görünme zamanı güzel. Bu yeni koddan sonra nasıl görüneceği aşağıda açıklanmıştır:

öğretici slayt gösterisi ilk css

Bu CSS'yi stil etiketler:

html {font-family: helvetica, arial; } #showContainer {/ * Tüm görüntüler için ana sarmalayıcı * / width: 670px; dolgu: 0; kenar boşluğu: 0 otomatik; taşma: gizli; pozisyon: göreceli; } .navButton {/ * Düğmelerin güzel görünmesini sağlayın * / cursor: pointer; şamandıra: sol; genişlik: 25 piksel; yükseklik: 22px; dolgu: 10 piksel; kenar boşluğu: 5 piksel; taşma: gizli; metin hizalama: merkez; Beyaz renk; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 18 piksel; arka plan: # 000000; opaklık: 0.65; kullanıcı seçimi: yok; } .navDüğmesi: üzerine gelin {opaklık: 1; } .caption {float: sağ; } .imageContainer: not (: first-child) {/ * İlk * / display: none dışında tüm resimleri gizle; }

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

Tamamen örnek resimler kullanıyorum 670 x 503 piksel, bu slayt gösterisi çoğunlukla bu boyuttaki görüntüler etrafında tasarlanmıştır. Farklı boyutta görüntüler 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'nin kendisi açıklayıcıdır. Düğmeleri ve metin rengiyle birlikte, görüntüleri depolamak, her şeyi ortada hizalamak, yazı tipini belirtmek için kabın boyutunu tanımlayan kod vardır. Daha önce karşılaşmamış olabileceğiniz birkaç stil var:

  1. imleç: işaretçi - İmlecinizi düğmelerin üzerine getirdiğinizde imleç bir oktan işaret parmağına dönüşür.
  2. opaklık: 0.65 - Bu, düğmelerin şeffaflığını artırır.
  3. kullanıcı seçimi: yok - Bu, düğmelerdeki metni yanlışlıkla vurgulayamamanızı sağlar.

Bu kodun çoğunun sonuçlarını düğmelerde görebilirsiniz:

öğretici düğme üzerine gelme efekti

Buradaki en karmaşık kısım bu garip görünümlü çizgi:

.imageContainer: değil (: ilk çocuk) {

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

İlk olarak, imageContainer sınıf. :değil() sözdizimi, parantez içindeki tüm öğelerin dışlanan bu tarzdan. Sonunda, :ilk çocuk sözdizimi, bu CSS'nin adla eşleşen herhangi bir öğeyi hedeflemesi gerektiğini belirtir fakat ilk öğeyi yoksay. Bunun nedeni basit. Bu bir slayt gösterisi olduğundan, aynı anda yalnızca bir görüntü gerekir. Bu CSS, birinciden başka tüm resimleri gizler.

3. JavaScript

Bulmacanın son parçası JavaScript. Bu, slayt gösterisi işlevinin doğru bir şekilde çalışması için mantıktır.

Bu kodu senaryo etiket:

$ (document) .ready (function () {$ ('# previous'). on ('click', function () {// Önceki resme değiştir $ ('# im_' + currentImage) .stop (). fadeOut (1); decreaseImage (); $ ('# im_' + currentImage) .stop (). fadeIn (1); }); $ ('# next'). on ('click', function () {// Sonraki resme değiştir $ ('# im_' + currentImage) .stop (). fadeOut (1); increaseImage (); $ ('# im_' + currentImage) .stop (). fadeIn (1); }); var currentImage = 1; var totalImages = 3; function riseImage () {/ * currentImage değerini 1 arttırır. * TotalImages'dan büyükse 1'e sıfırlar * / ++ currentImage; if (currentImage> totalImages) {currentImage = 1; }} function reduceImage () {/ * currentImage değerini 1 azaltır. * 1 * / --currentImage değerinden küçükse totalImages sıfırlar; if (currentImage <1) {currentImage = totalImages; } } });

Karşı sezgisel görünebilir, ancak ilk kod bloklarını atlayacağım ve kodu yarıdan açıklamaya doğrudan atlayacağım - endişelenmeyin, tüm kodu açıklayacağım!

İki değişken tanımlamanız gerekir. (İşte JavaScript'te değişkenler nasıl tanımlanı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şlayacak görüntünün sayısını saklar. Daha fazla resminiz varsa, totalImages değişkeni sahip olduğunuz toplam görüntü sayısına ayarlayın.

İki işlev increaseImage ve decreaseImage ilerlemek veya geri çekilmek Geçerli resim değişken. Bu değişken birden fazla veya daha yüksek olmalı totalImages, bire sıfırlanır veya totalImages. Bu, slayt gösterisinin sona ulaştığında dönmesini sağlar.

Başlangıçtaki koda geri dönelim. Bu kod, sonraki ve önceki düğmeleri “hedefler”. Her bir düğmeyi tıkladığınızda, artırmak veya azaltmak yöntemleri. Tamamlandığında, sadece ekrandaki görüntüyü kaybolur ve yeni görüntüde kaybolur ( Geçerli resim değişken).

Dur() yöntemi jQuery içine yerleştirilmiştir. Bu, bekleyen etkinlikleri iptal eder. Bu, her düğmeye basmanın düzgün olmasını sağlar ve farede biraz deli olursanız, yürütmek için bekleyen 100 düğmeye basmanızın olmadığı anlamına gelir. solgun (1) ve fadeOut (1) yöntemler görüntüleri gerektiği gibi içeri veya dışarı soldurur. Sayı, solma süresini milisaniye olarak belirtir. Bunu 500 gibi daha büyük bir sayıya değiştirmeyi deneyin. Daha büyük bir sayı daha uzun geçiş süresine neden olur. Ancak çok ileri giderseniz, garip olaylar veya görüntü değişiklikleri arasında “titriyor” görmeye başlayabilirsiniz. İşte slayt gösterisi iş başında:

öğretici slayt gösterisi örneği

Otomatik İlerleme

Bu slayt gösterisi şimdi oldukça iyi görünüyor, ancak son bir son dokunuş gerekiyor. Otomatik ilerleme, bu slayt gösterisini gerçekten parlatacak bir özelliktir. Belirli bir süre sonra, her görüntü otomatik olarak bir sonrakine geçer. Ancak kullanıcı yine de ileri veya geri gidebilir.

Bu jQuery ile kolay bir iştir. Kodunuzu her 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ık" taklit etmek ve mevcut kodun tüm işi yapmasına izin vermektir.

İşte ihtiyacınız olan yeni JavaScript - bunu, decreaseImage fonksiyon:

window.setInterval (function () {$ ('# önceki'). tıklayın (); }, 2500);

Burada pek bir şey yok. window.setInterval yöntemi, sonunda belirtilen zamana göre düzenli olarak bir kod parçası çalıştıracaktır. Zaman 2500 (milisaniye cinsinden), bu slayt gösterisinin 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. Tıklayın yöntemi, düğmeyi kullanıcı fare düğmesini tıklamış gibi çalıştırması için tetikler.

Bir sonraki JavaScript sorununa hazırsanız, GatsbyJS gibi statik bir web sitesi oluşturucusuna sahip bir web sitesi oluşturmayı deneyin. Ruby öğrencisiyseniz, Jekyll de bir seçenektir. İşte nasıl Jekyll ve GatsbyJS birbirlerine karşı ücret Jekyll vs. GatsbyJS: Hangi Statik Site Oluşturucusu En İyi Web Sitesini Oluşturuyor?Veritabanı odaklı dinamik olmayan bir web sitesine mi ihtiyacınız var? İşleri basit tutmak için Jekyll veya GatsbyJS gibi statik bir web sitesi oluşturucu kullanın. Daha fazla oku .

Image Credit: Tharanat Sardsri aracılığıyla Shutterstock.com

Joe, İngiltere Lincoln Üniversitesi Bilgisayar Bilimi mezunudur. Profesyonel bir yazılım geliştiricisidir ve uçağı uçurmadığı veya müzik yazmadığı zamanlarda, genellikle fotoğraf çekerken veya video üretirken bulunabilir.