Javascript şablonlarını kullanarak bir slayt gösterisi oluşturun. Fotoğraf laboratuvarı. Slider Kontrolleri

Slayt gösterisi oluşturma programlarına genel bakış Bir web sitesi için slayt gösterisi oluşturma

Bir web sitesinde yayınlamak üzere bir slayt gösterisi oluştururken hazır yazılım çözümlerini kullanmak en iyisidir. Bana göre en iyi ve en kolay seçenek, özel bir ücretsiz komut dosyası kitaplığı (küçük JavaScript programları) olan jQuery'yi kullanmaktır. Önceki makalelerde bu harika web geliştirme aracından zaten bahsetmiştik. Örneğin, Fotoğraf galerisi makalesine bakın jQuery- basit ve güzel! . Şimdi sitede kaydırıcı adı verilen bir slayt gösterisi oluşturmak için jQuery'yi kullanalım.

Bunu yapmak için, Portland, Oregon, ABD'deki "The Brigade" tasarım stüdyosunun teknik direktörü programcı Nathan Searles tarafından oluşturulan Slides eklentisini kullanacağız. Gelişmelerinden bir diğeri, çevrimiçi bir mağaza için fotoğraf galerisi makalesinde anlatıldı.

Slaytlar eklentisinin kurulumu kolaydır, slayt gösterisindeki görüntüleri değiştirmek için çeşitli seçeneklere sahiptir ve genellikle site başlığı için kullanılır. Bu kaydırıcının varsayılan ayarlarla nasıl çalıştığına dair bir örnek şekilde gösterilmiştir:

Slayt gösterisi yükleme Slaytlar

Her zaman olduğu gibi öncelikle sitede bir scripts klasörü oluşturun. Daha sonra arşivi indirmeniz ve oluşturulan klasöre açmanız gerekir. İki komut dosyası jquery-1.8.3.min.js ve jquery.cycle.all.min.js içerecektir.

Daha sonra, etiketin içindeki sayfa başlığına... komut dosyalarının yolunu gösteren aşağıdaki satırları ve slayt gösterisinin parametrelerini tanımlayan küçük bir javascript'i ekliyoruz:

$(".slayt gösterisi").cycle((
fx: "solma"
});
});

.slayt gösterisi(
genişlik: 200 piksel;
yükseklik: 135 piksel;
kenar boşluğu: otomatik;
}

Gördüğünüz gibi, gelecekteki slayt gösterisinin görüntüleri için pencerenin boyutunu (genişlik - yükseklik) belirtmeniz gereken basit bir CSS kuralı da var. Doğal olarak tüm görsellerin aynı boyutta olması gerekir. İsterseniz slayt gösterisi resimlerinize kenarlıklar, arka planlar, dolgular ve diğer öğeleri ekleyerek CSS seçeneklerini genişletebilirsiniz. Bu durumda, toplam boyutu, yani görüntünün yanı sıra ayarladığınız uzunluk ve genişlik boyunca girintileri ve kenarlıkları belirtmeniz gerekir.

Önemli Not: Siteniz birkaç jQuery eklentisi kullanıyorsa, jquery.js dosyasını (tercihen en son sürümü) birkaç kez indirmemek için kök klasöre taşımak daha uygundur. Bu durumda ona erişim satırı tüm eklentiler için aynı görünecektir. Özellikle, örneğimiz için şu şekilde ortaya çıkıyor:

Birbirleriyle çakışmaması için jQuery'nin birkaç farklı versiyonunun aynı sayfada kullanılması önerilmez. Aynı zamanda, tüm sürümler birbiriyle değiştirilemediği için eklentilerin jQuery'nin yüklü sürümüyle çalıştığını kontrol ettiğinizden emin olun.

Son adım, görüntüleri sayfaya yerleştirmektir. Burada da her şey basit. Görüntüleri, genişliği ve yüksekliği ayarlamanıza olanak tanıyan bir etiketin veya başka bir etiketin içine yerleştirin ve class="slideshow" değerini belirtin. Örneğimizde kaydırıcının HTML kodu şuna benzer:

Bu noktada slayt gösterisinin oluşturulması neredeyse tamamlandı ve sayfanızı tarayıcıda açarak görüntüleyebilirsiniz.

Slayt gösterisi seçeneklerini ayarlama Slaytlar

Oluşturulan slayt gösterisinde sayfa başlığına yerleştirilen javascript'i değiştirerek kareler arasında farklı geçiş türleri ayarlayabilirsiniz. Ayrıca komut dosyasındaki sink:false satırını sink:true ile değiştirerek görüntüleri değiştirirken boşluğu kaldırabilirsiniz.

Görüntülerin görüntülenme süresi timeout parametresiyle, hız ise hız parametresiyle kontrol edilir. Örnek olarak, burada birkaç yaygın slayt gösterisi seçeneği ve sayfa başlığına eklenmesi gereken ilgili komut dosyaları verilmiştir.

1. Çözünme (örneğimiz): $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "solma", //geçiş türü hız: 1000 , //görüntü değiştirme hızı zaman aşımı: 1000 //kare süresi }); });
2. Karıştırma: $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "karıştır", senkronizasyon: yanlış, hız: 500 zaman aşımı: 5000 }); });
3. Yakınlaştır: $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "yakınlaştırma", senkronizasyon: yanlış }); });
4. X veya Y ekseninde çevirin: $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "curtainX", // Y ekseni boyunca dönüş için - perdeY senkronizasyon: yanlış }); });
5. Dikey olarak daraltın: $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "turnDown", // yön turnUp, turnLeft, turnRight olarak ayarlanabilir senkronizasyon: doğru }); });
6. Kaydırma (ofset): $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx:"scrollDown", // ofset yönü ayarlanabilir ScrollUp, ScrollLeft, ScrollRight senkronizasyon: doğru }); });
7. Sağa doğru kararın: $(document).ready(function() ( $(".slayt gösterisi").cycle(( fx: "kapak }); });

Bazen bu makalede yapıldığı gibi sitenin bir sayfasına birkaç slayt gösterisi seçeneği yerleştirmeniz gerekir. Bunu yapmak için, $(".slideshow").cycle(( (yukarıdaki tablodaki koda bakın) satırındaki her seçenek için farklı sınıflar belirtmeniz yeterlidir ve her sınıf için pencere boyutlarını belirtmeyi unutmayın. CSS'de.

Slaytlar yalnızca resimler içeriyorsa yapıyı biraz değiştirebilirsiniz:

Önceki Sonraki

Alt özelliğine anlamlı bir değer eklemeyi unutmayın.

Sayfa bağlantılarını kullanmak için aşağıdakileri yapabilirsiniz:

... ... ... 1 2 3

Önceki Sonraki 1 2 3

"Veri" niteliklerinin kullanımına dikkat edin - bazı slayt gösterileri resimleri arka plan olarak ekleyebilir ve bu nitelikler komut dosyasında arka planı ve slaydı bağlamak için yerler olarak kullanılacaktır.

Listeleri Kullanmak Anlamsal olarak doğru bir yaklaşım, liste öğelerini slayt olarak kullanmak olacaktır. Bu durumda yapı şu şekilde olacaktır:

Slaytların sırası iyi tanımlanmışsa (örneğin bir sunumda), numaralandırılmış listeleri kullanabilirsiniz.

CSS Aşağıdaki yapıyla başlayalım:

Önceki Sonraki

Çünkü Slayt gösterisi sağdan sola doğru çalışacağı için dış kap sabit bir boyuta sahip olacak, iç kap ise tüm slaytları içerdiğinden daha geniş olacaktır. İlk slayt görünecektir. Bu, taşma yoluyla ayarlanır:

Kaydırıcı ( genişlik: 1024 piksel; taşma: gizli; ) .slider-wrapper ( genişlik: 9999 piksel; yükseklik: 683 piksel; konum: göreceli; geçiş: sol 500 ms doğrusal; )

İç ambalaj stilleri şunları içerir:

Büyük genişlik
- sabit yükseklik, maksimum kaydırma yüksekliği
- konum: göreceli, slayt hareketi oluşturmanıza olanak tanır
- Hareketi pürüzsüz hale getirecek CSS geçişi sola. Basitlik açısından tüm önekleri dahil etmedik. Bunun için CSS dönüşümlerini de (çeviriyle birlikte) kullanabilirsiniz.

Slaytların sıralanmasını sağlayan kayan nokta özelliği vardır. JS'de sol uzaklıklarını alabilmeniz için göreceli olarak konumlandırılmışlardır. Kayma efekti oluşturmak için kullanıyoruz.

Slayt ( kayan nokta: sol; konum: göreceli; genişlik: 1024 piksel; yükseklik: 683 piksel; )

Belli bir genişlik belirlemiş olsak da scriptte bunu slayt sayısını slayt genişliğiyle çarparak değiştirebiliriz. Hangi genişliğe ihtiyacınız olabileceğini asla bilemezsiniz.

Gezinme “Önceki” ve “Sonraki” butonları aracılığıyla gerçekleştirilir. Varsayılan stillerini sıfırladık ve kendimizinkini atadık:

Slider-nav ( yükseklik: 40 piksel; genişlik: %100; kenar boşluğu: 1,5 em; ) .slider-nav düğmesi ( kenarlık: yok; ekran: blok; genişlik: 40 piksel; yükseklik: 40 piksel; imleç: işaretçi; metin girintisi : -9999em; arka plan rengi: şeffaf; arka plan tekrarı: tekrarlama yok; ) .slider-nav düğmesi.slider-önceki ( float: sol; arka plan resmi: url(önceki.png); ) .slider-nav düğmesi .slider-sonraki ( kayan nokta: sağ; arka plan resmi: url(sonraki.png); )

Düğmeler yerine sayfa bağlantılarını kullanırken aşağıdaki stilleri oluşturabilirsiniz:

Slider-nav ( metin hizalama: merkez; kenar boşluğu üst: 1,5em; ) .slider-nav a ( ekran: satır içi blok; metin dekorasyonu: yok; kenarlık: 1 piksel katı #ddd; renk: #444; genişlik: 2em; yükseklik: 2em; line-height: 2; text-align: center; ) .slider-nav a.current ( border-color: #000; color: #000; font-weight: kalın; )

Bu sınıflar komut dosyasından dinamik olarak atanacaktır.

Bu yaklaşım kayma efekti için uygundur. Fade-in efektini elde etmek istiyorsak stilleri değiştirmemiz gerekir çünkü float slaytlar arasına yatay dolgu ekler. Yani, tek satırdaki slaytlara ihtiyacımız yok - bir "paket" slayta ihtiyacımız var:

Slider ( genişlik: 1024 piksel; kenar boşluğu: 2 em otomatik; ) .slider-wrapper ( genişlik: 100%; yükseklik: 683 piksel; konum: göreceli; /* Mutlak konumlandırma için bir bağlam oluşturur */ ) .slide ( konum: mutlak; /* Tüm slaytların mutlak konumlandırılması */ genişlik: %100; yükseklik: %100; opaklık: 0; /* Tüm slaytlar gizlidir */ geçiş: opaklık 500ms doğrusal; ) /* Başlangıçta yalnızca ilki görünür */ .slider- ambalaj >
Slaytları gizlemek için opacity özelliğini kullanırız çünkü ekran okuyucular display: none özelliğine sahip öğelerin içeriğini atlar (bkz. CSS İş Başında: Yalnızca Ekran Okuyucu Kullanıcıları İçin Görünmez İçerik).

CSS bağlamsal konumlandırması sayesinde, kaynaktaki son slayt diğerlerinin önünde olacak şekilde bir "slayt yığını" oluşturduk. Ama ihtiyacımız olan bu değil. Slaytların sırasını korumak için ilki dışındaki tüm slaytları gizlememiz gerekir.

JS, mevcut slaydın opaklık özelliğinin değerini değiştirerek ve diğer tüm slaytlar için bu değeri sıfırlayarak CSS geçişini kullanır.

JavaScript kodu Sayfalandırmasız Slayt Gösterisi Sayfalandırmasız Slayt Gösterisi “Sonraki” ve “Önceki” butonlarına basılarak çalışır. Arttırma ve eksiltme operatörleri olarak düşünülebilirler. Düğmelere her bastığınızda artırılacak veya azaltılacak bir işaretçi (veya imleç) her zaman bulunur. Başlangıç değeri 0'dır ve amaç, geçerli slaydı dizi öğelerinin seçildiği şekilde seçmektir.

Yani ilk kez İleri'ye tıkladığımızda işaretçi 1 artar ve ikinci bir slayt elde ederiz. Önceki'ye tıklayarak işaretçiyi küçültüyoruz ve ilk slaydı alıyoruz. Vesaire.

Geçerli slaydı elde etmek için işaretçiyle birlikte jQuery'nin .eq() yöntemini kullanırız. Saf JS'de şöyle görünür:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: function(pointer) ( var currentSlide = this.slides; //... ) );

Unutmayın - NodeList dizinleri tıpkı bir dizi gibi kullanır. Geçerli slaydı seçmenin başka bir yolu da CSS3 seçicileri kullanmaktır:

Slideshow.prototype = ( init: function() ( //... ), _slideTo: function(pointer) ( var n = pointer + 1; var currentSlide = this.el.querySelector(".slide:nth-child(" + n + ")"); //... ) );

CSS3:nth-child() seçicisi 1'den başlayan öğeleri sayar, dolayısıyla işaretçiye 1 eklemeniz gerekir. Bir slayt seçildikten sonra ana kabının sağdan sola taşınması gerekir. JQuery'de .animate() yöntemini kullanabilirsiniz:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( sarmalayıcı: ".slider-wrapper", slaytlar: ".slide", //... hız: 500, hareket hızı : "doğrusal" ), seçenekler); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element).animate(( left : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); )(jQuery);

Normal JS'de .animate() yöntemi yoktur, bu nedenle CSS geçişlerini kullanırız:

Kaydırıcı sarmalayıcı ( konum: göreceli; // gerekli geçiş: sol 500ms doğrusal; )

Artık left özelliğini stil nesnesi aracılığıyla dinamik olarak değiştirebilirsiniz:

Şimdi her kontrol için bir click olayı oluşturmamız gerekiyor. JQuery'de .on() yöntemini kullanabilirsiniz ve saf JS'de addEventListener() yöntemini kullanabilirsiniz.

Ayrıca işaretçinin liste sınırlarına - "Önceki" için 0'a ve "Sonraki" için toplam slayt sayısına ulaşıp ulaşmadığını da kontrol etmeniz gerekir. Her durumda ilgili düğmeyi gizlemeniz gerekir:

(function($) ( $.fn.slideshow = function(options) ( seçenekler = $.extend(( sarmalayıcı: ".slider-wrapper", slaytlar: ".slide", önceki: ".slider-önceki", sonraki : ".slider-next", //... hız: 500, hareket hızı: "doğrusal" ), seçenekler); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(bu), $önceki = $(options.önceki, $element), $sonraki = $(options.sonraki, $element), indeks = 0, toplam = $(options.slides).uzunluk; $next.on("tıklayın", function() ( index++; $önceki.show(); if(index == toplam - 1) ( index = toplam - 1; $next.hide(); ) SlideTo(index, $element); )); $önceki.on("tıklayın", function() ( indeks--; $sonraki.show(); if(index == 0) ( indeks = 0; $önceki.hide(); ) SlideTo(index, $element); )); )); ); ))(jQuery);

Ve saf JS'de şöyle görünür:

Function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper) "); this.slides = this.el.querySelectorAll(".slide"); this.önceki = this.el.querySelector(".slider-önceki"); this.next = this.el.querySelector(".slider) -sonraki"); this.index = 0; this.toplam = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), eylemler: function() ( var self = this; self.next.addEventListener("tıklayın", function() ( self.index++; self.önceki.style. display = "blok"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "yok"; ) self._slideTo(self.index ); ), false); self.precious.addEventListener("tıklayın", function() ( self.index--; self.next.style.display = "blok"; if(self.index == 0) ( self .index = 0;self.önceki.style.display = "yok"; ) self._slideTo(self.index); ), YANLIŞ); ) );

Sayfalandırılmış Slayt Gösterisi Bu tür slayt gösterisinde her bağlantı bir slayttan sorumludur, dolayısıyla bir dizine ihtiyaç yoktur. Animasyonlar değişmez; kullanıcının slaytlarda hareket etme şekli değişir. JQuery için aşağıdaki koda sahip olacağız:

(function($) ( $.fn.slideshow = function(options) ( seçenekler = $.extend(( sarmalayıcı: ".slider-wrapper", slaytlar: ".slide", nav: ".slider-nav", hız : 500, hareket hızı: "doğrusal" ), seçenekler); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( left: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("tıklayın", function(e) ( e.preventDefault(); var $a = $(this), $slide = $($a.attr("href) ")); SlideTo($slide, $element); $a.addClass("current").siblings().removeClass("current"); )); )); ))(jQuery);

Bu durumda her bir bağlantı belirli bir slaydın kimliğine karşılık gelir. Saf JS'de hem onu hem de slaytların sayısal dizinini NodeList'te saklayan data özelliğini kullanabilirsiniz:

Function Slider(element) ( this.el = document.querySelector(element); this.init(); ) Slider.prototype = ( init: function() ( this.links = this.el.querySelectorAll("#slider-nav) a"); this.wrapper = this.el.querySelector("#slider-wrapper"); this.navigate(); ), gezin: function() ( for (var i = 0; i< this.links.length; ++i) { var link = this.links[i]; this.slide(link); } }, slide: function(element) { var self = this; element.addEventListener("click", function(e) { e.preventDefault(); var a = this; self.setCurrentLink(a); var index = parseInt(a.getAttribute("data-slide"), 10) + 1; var currentSlide = self.el.querySelector(".slide:nth-child(" + index + ")"); self.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; }, false); }, setCurrentLink: function(link) { var parent = link.parentNode; var a = parent.querySelectorAll("a"); link.className = "current"; for (var j = 0; j < a.length; ++j) { var cur = a[j]; if (cur !== link) { cur.className = ""; } } } };

IE10'dan beri sınıfları classList aracılığıyla yönetebilirsiniz:

Link.classList.add("geçerli");

Ve IE11 ile veri özellikleri, veri kümesi özelliği aracılığıyla elde edilebilir:

Var index = parseInt(a.dataset.slide, 10) + 1;

Kontrollü Sayfalandırılmış Slayt Gösterileri Bu slayt gösterileri koda bazı karmaşıklıklar katar; dizin ve sayfa karmalarının kullanımını birleştirmeniz gerekir. Yani, geçerli slaytın hem işaretçi konumuna hem de bağlantılar aracılığıyla seçilen slayta göre seçilmesi gerekir.

Bu, DOM'daki her bağlantının sayı dizini aracılığıyla senkronize edilebilir. Bir bağlantı - bir slayt, yani dizinleri 0, 1, 2 vb. olacaktır.

JQuery'de kod şöyle olacaktır:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... pagination: ".slider-pagination", //... ), options); $. fn.slideshow.index = 0; return this.each(function() ( var $element = $(this), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("tıklayın", function(e) ( e.preventDefault(); var $a = $(this), elemIndex = $a.index(); // DOM sayısal dizini $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $önceki.show(); ) else ( $önceki.hide(); ) if($. fn.slideshow.index == toplam - 1) ( $.fn.slideshow.index = toplam - 1; $next.hide(); ) else ( $next.show(); ) SlideTo($.fn.slideshow. index, $element); $a.addClass("current"). kardeşler().removeClass("current"); )); )); ); //... ))(jQuery);

İmlecin görünürlüğünün değiştiğini hemen görebilirsiniz; indeks artık slayt gösterisi nesnesinin bir özelliği olarak bildirildi. Bu şekilde jQuery'deki geri aramaların yaratabileceği kapsam sorunlarından kaçınırız. İmleç, slayt gösterisi nesnesinin genel özelliği olarak bildirildiğinden eklenti ad alanı dışında bile artık her yerde kullanılabilir.

.index() yöntemi her bağlantının sayısal dizinini verir.

Saf JS'de böyle bir yöntem yoktur, dolayısıyla veri niteliklerini kullanmak daha kolaydır:

Artık prosedürlerimizi referanslara bağlayabilir ve az önce oluşturduğumuz veri özelliklerini kullanabiliriz:

Eylemler: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.önceki.style.display = "blok"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "yok "; ) else ( self.next.style.display = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(this); ), YANLIŞ); ))

Boyutları Anlamak Aşağıdaki CSS kuralına dönelim:

Kaydırıcı sarmalayıcı ( genişlik: 9999 piksel; yükseklik: 683 piksel; konum: göreceli; geçiş: sol 500 ms doğrusal; )

Çok fazla slaytımız varsa 9999 yeterli olmayabilir. Her slaydın genişliğine ve slayt sayısına göre slaytların boyutlarını anında ayarlamanız gerekir.

JQuery'de her şey basit:

// Tam genişlikte slayt gösterisi this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.slides, $element ).width ($(window).width()); $(options.wrapper, $element).width($(window).width() * toplam); //... ));

Pencerenin genişliğini alın ve her slaytın genişliğini ayarlayın. İç ambalajın toplam genişliği, pencerenin genişliği ile slayt sayısının çarpılmasıyla elde edilir.

// Sabit genişlikli slayt gösterisi return this.each(function() ( var $element = $(this), total = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * toplam); //... ));

Burada başlangıç genişliği her slaytın genişliğine göre ayarlanır. Paketleyicinin genel genişliğini ayarlamanız yeterlidir.

İç kap artık yeterince geniştir. Saf JS'de bu yaklaşık olarak aynı şekilde yapılır:

// Tam genişlikte slayt gösterisi Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Görünüm portunun genişliği var winWidth = window .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var sarmalayıcıWidth = winWidth * self.total; for(var i = 0; i< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

Solma Efektleri Solma efektleri genellikle slayt gösterilerinde kullanılır. Geçerli slayt kaybolur ve bir sonraki görünür. jQuery, hem opacity hem de display özellikleriyle çalışan fadeIn() ve fadeOut() yöntemlerine sahiptir, böylece animasyon tamamlandığında öğe sayfadan kaldırılır (display:none).

Saf JS'de opacity özelliğiyle çalışmak ve CSS konumlandırma yığınını kullanmak en iyisidir. Daha sonra başlangıçta slayt görünür olacak (opaklık: 1), diğerleri gizlenecek (opaklık: 0).

Aşağıdaki stil kümesi bu yöntemi göstermektedir:

Slider ( genişlik: %100; taşma: gizli; konum: göreceli; yükseklik: 400 piksel; ) .slider-wrapper ( genişlik: %100; yükseklik: %100; konum: göreceli; ) .slide ( konum: mutlak; genişlik: 100 %; yükseklik: %100; opaklık: 0; ) .slider-wrapper > .slide:first-child ( opaklık: 1; )

Saf JS'de her slaydın CSS geçişini kaydetmeniz gerekir:

Slayt ( kayan nokta: sol; konum: mutlak; genişlik: %100; yükseklik: %100; opaklık: 0; geçiş: opaklık 500ms doğrusal; )

jQuery ile fadeIn() ve fadeOut() yöntemlerini kullanmak için opaklığı ve görüntüyü değiştirmeniz gerekir:

Slide ( float: left; konum: mutlak; genişlik: %100; yükseklik: %100; display: none; ) .slider-wrapper > .slide:first-child ( display: blok; )

jQuery'de kod aşağıdaki gibidir:

(işlev($) ( $.fn.slideshow = işlev(seçenekler) ( seçenekler = $.extend(( sarmalayıcı: ".slider-wrapper", önceki: ".slider-önceki", sonraki: ".slider-sonraki" , slaytlar: ".slide", gezinme: ".slider-nav", hız: 500, hareket hızı: "doğrusal" ), seçenekler); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide.animate(( opacity: 1 ), options.speed, options.easing). kardeşler(options.slides).css("opacity", 0); ); //. .. ); ))(jQuery);

Opaklığı canlandırırken, kalan slaytlar için de bu özelliğin değerlerini değiştirmeniz gerekir.

JavaScript'te şöyle olurdu:

Slideshow.prototype = ( //... _slideTo: function(slide) ( var currentSlide = this.slides; currentSlide.style.opacity = 1; for(var i = 0; i< this.slides.length; i++) { var slide = this.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } }, //... };

Medya Öğeleri: Video Bir slayt gösterisine video dahil edebiliriz. İşte Vimeo'dan bir video slayt gösterisi örneği:

Videolar iframe aracılığıyla eklenir. Bu, resimdekiyle aynı değiştirilebilir satır içi bloktur. Değiştirilebilir – çünkü içerik harici bir kaynaktan alınmıştır.

Tam sayfa slayt gösterisi oluşturmak için stilleri aşağıdaki gibi değiştirmeniz gerekir:

Html, body ( kenar boşluğu: 0; dolgu: 0; yükseklik: %100; minimum yükseklik: %100; /* Yükseklik sayfanın tamamı olmalıdır */ ) .slider ( genişlik: %100; taşma: gizli; yükseklik: 100 %; min-height: 100%; /* Tam yükseklik ve genişlik */ konum: mutlak; /* Mutlak konumlandırma */ ) .slider-wrapper ( width: 100%; height: 100%; /* Yükseklik ve genişlik to tam */ konum: göreceli; ) .slide ( float: left; konum: mutlak; genişlik: %100; yükseklik: %100; ) .slide iframe ( display: blok; /* Blok öğesi */ konum: mutlak; /* Mutlak konumlandırma */ genişlik: %100; yükseklik: %100; /* Tam yükseklik ve genişlik */ )

Otomatik Slayt Gösterileri Otomatik slayt gösterileri zamanlayıcıları kullanır. setInterval() zamanlayıcı fonksiyonu her geri çağrıldığında imleç 1 artırılacak ve böylece bir sonraki slayt seçilecektir.

İmleç maksimum slayt sayısına ulaştığında sıfırlanmalıdır.

Sonsuz slayt gösterileri kullanıcılar için hızla sıkıcı hale gelir. En iyi uygulama, kullanıcı animasyonun üzerine geldiğinde animasyonu durdurmak ve imleç uzaklaştığında devam ettirmektir.

(function($) ( $.fn.slideshow = function(options) ( seçenekler = $.extend(( slaytlar: ".slide", hız: 3000, hareket hızı: "doğrusal" ), seçenekler); var timer = null; // Zamanlayıcı var index = 0; // İmleç var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true).animate (( opacity: 1 ), options.speed, options.easing). kardeşler(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Sıra zamanlayıcısını başlat = setInterval ( function() ( index++; // İmleci 1 artır if(index == $(options.slides, element).length) ( index = 0; // İmleci sıfırla ) SlideTo(index, element); ), options.speed ); // method.animate() ile aynı aralık ); var startStop = function(element) ( element.hover(function() ( // Animasyonu durdur clearInterval(timer); timer = null; ), function () ( autoSlide(element); // Animasyonu sürdürün )); ); return this.each(function() ( var $element = $(this); autoSlide($öğe); startStop($element); )); ); ))(jQuery);

.stop() yönteminin her iki parametresi de true olarak ayarlanmıştır çünkü dizimizden bir animasyon kuyruğu oluşturmamıza gerek yok.

Saf JS'de kod daha basit hale gelir. Her slayt için belirli bir süre ile bir CSS geçişi kaydediyoruz:

Slayt ( geçiş: opaklık 3s doğrusal; /* 3 saniye = 3000 milisaniye */ )

Ve kod şöyle olacak:

Klavyeyle Gezinme Gelişmiş slayt gösterileri klavyeyle gezinmeyi sunar; Tuşlara basarak slaytlar arasında gezinin. Bizim için bu, tuşa basma olayının işlenmesini kaydetmemiz gerektiği anlamına gelir.

Bunu yapmak için olay nesnesinin keyCode özelliğine erişeceğiz. Basılan tuşun kodunu (kod listesi) döndürür.

“Önceki” ve “Sonraki” butonlarına eklediğimiz olaylar artık “sol” ve “sağ” tuşlarına da eklenebiliyor. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39) ( // Sol ok $next.trigger("click"); ) if( code == 37) ( // Sağ ok $önceki.trigger("tıklayın"); ) ));

Saf JS'de, basit .trigger() yöntemi yerine, submitEvent() yöntemini kullanmanız gerekecektir:

Document.body.addEventListener("keydown", function(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // fare tıklaması if(code == 39) ( // Sol ok self .next.dispatchEvent(evt); ) if(code == 37) ( // Sağ ok self.precious.dispatchEvent(evt); ) ), false);

İyi projelerde bunu yapmak alışılmış bir şey değildir. Genel bir yöntemde çevirmeyi sağlayan işlevselliği tanımlamamız ve ardından düğmeye tıklandığında onu çağırmamız gerekir. Daha sonra, programın başka bir bölümünün bu işlevselliği uygulaması gerekiyorsa, DOM olaylarını taklit etmeye gerek kalmayacak, yalnızca bu yöntemi çağırabileceksiniz.

Geri aramalar Herhangi bir slayt gösterisi eylemi gerçekleştirildiğinde yürütülecek olan eyleme bazı kodlar ekleyebilmek güzel olurdu. Geri çağırma işlevlerinin amacı budur; yalnızca belirli bir eylem gerçekleştiğinde yürütülürler. Diyelim ki slayt gösterimizin altyazıları var ve bunlar varsayılan olarak gizli. Animasyon sırasında mevcut slayt için bir başlık göstermemiz, hatta onunla bir şeyler yapmamız gerekiyor.

JQuery'de şöyle bir geri arama oluşturabilirsiniz:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( //... geri çağırma: function() () ), options); var SlideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.animate(( opacity: 1), options.speed, options.easing, // Geçerli slayt için geri arama options.callback($ currentSlide))).kardeşler(options.slides).css("opaklık", 0); ); //... ); ))(jQuery);

Bu durumda geri çağırma, geçerli slaydı argüman olarak alan .animate() işlevinden gelen bir işlevdir. Bunu nasıl kullanabileceğiniz aşağıda açıklanmıştır:

$(function() ( $("#main-slider").slideshow(( callback: function(slide) ( var $wrapper = Slide.parent(); // Geçerli başlığı gösterir ve diğerlerini gizler $wrapper.find (" .slide-caption").hide(); Slide.find(".slide-caption").show("yavaş"); ) )); ));

Saf JS'de:

(function() ( function Slideshow(element, callback) ( this.callback = callback || function()); // Geri çağrımız this.el = document.querySelector(element); this.init(); ) Slideshow.prototip = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = bu; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Geri çağırma işlevi yapıcının ikinci parametresi olarak tanımlanır. Bunu şu şekilde kullanabilirsiniz:

Document.addEventListener("DOMContentLoaded", function() ( var Slider = new Slideshow("#main-slider", function(slide) ( var sarmalayıcı = Slide.parentNode; // Geçerli başlığı gösterir ve diğerlerini gizler var allSlides = sarmalayıcı.querySelectorAll(".slide"); var caption = Slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Harici API'ler Şu ana kadar çalışma senaryomuz basit: tüm slaytlar zaten belgenin içinde. Dışarıdan (YouTube, Vimeo, Flickr) veri eklememiz gerekiyorsa, harici içerik aldığımızda slaytları anında doldurmamız gerekir.

Üçüncü taraf sunucudan gelen yanıt hemen olamayabileceğinden, işlemin devam ettiğini göstermek için bir yükleme animasyonu eklemeniz gerekir:

Önceki Sonraki

Bir gif veya saf bir CSS animasyonu olabilir:

#spinner ( kenarlık yarıçapı: %50; kenarlık: 2 piksel katı #000; yükseklik: 80 piksel; genişlik: 80 piksel; konum: mutlak; üst: %50; sol: %50; kenar boşluğu: -40 piksel 0 0 -40 piksel; ) # döndürücü:sonra ( içerik: ""; konum: mutlak; arka plan rengi: #000; üst:2 piksel; sol: %48; yükseklik: 38 piksel; genişlik: 2 piksel; sınır yarıçapı: 5 piksel; -webkit-transform-origin: %50 %97; transform-origin: %50 %97; -webkit-animation: açısal 1s doğrusal sonsuz; animasyon: açısal 1s doğrusal sonsuz; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);)) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);)) #spinner:before ( içerik: ""; konum: mutlak; arka plan rengi: #000; üst:6 piksel; sol: %48; yükseklik: 35 piksel; genişlik: 2 piksel; kenar yarıçapı: 5 piksel; -webkit-transform-origin: %50 %94 ; transform-origin: %50 %94; -webkit-animation: üçgensel 6s doğrusal sonsuz; animasyon: üçgensel 6s doğrusal sonsuz; ) @-webkit-keyframes üçgensel ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);)) @keyframes üçgensel ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);))

Adımlar şu şekilde olacaktır:
- dışarıdan veri istemek
- önyükleyiciyi gizle
- verileri ayrıştırma
- HTML oluştur
- bir slayt gösterisi görüntüleyin
- slayt gösterilerini işlemek

Diyelim ki bir kullanıcının YouTube'dan en yeni videolarını seçtiğimizi varsayalım. jQuery:

(function($) ( $.fn.slideshow = function(options) ( options = $.extend(( sarmalayıcı: ".slider-wrapper", //... yükleyici: "#spinner", //... limit: 5, kullanıcı adı: "learncodeacademy" ), seçenekler); //... var getVideos = function() ( // YouTube'dan video alın var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos) ( // Videoyu bir JSON nesnesi olarak alın $(options.loader). hide(); // Yükleyicinin gizlenmesi var entrys = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

Saf JavaScript'te fazladan bir adım vardır; JSON'u almak için bir yöntem oluşturmak:

Daha sonra prosedürler benzerdir:

(function() ( function Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: function(url, callback) ( callback = callback || function(); var request = new XMLHttpRequest(); request.open("GET", url, true); request.send(null); request .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON nesne geri çağrısı(veri); ) else ( console.log( request.status); ) ); ), //... getVideos: function() ( var self = bu; // YouTube videosunu al var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author = " + self.username + "&max-results = " + self.limit; self._getJSON(ytURL, function(videos) ( // Videoyu JSON nesnesi olarak alın var entrys = videos.feed.entry ; var html = ""; self.loader.style.display = "yok"; // Yükleyiciyi gizleme for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки