Güzel bir içerik kaydırıcısı oluşturma. JavaScript'te kendi elinizle bir kaydırıcı yapmak

> >

Kaydırıcı stilleri

.slider-box( genişlik : 320 piksel ; yükseklik : 210 piksel ; taşma : gizli ; ) .slider( konum : göreli ; genişlik : 10000 piksel ; yükseklik : 210 piksel ; ) .slider img( kayan nokta : sol ; z-endeksi : 0 ; )

container.slider-box, kaydırıcının boyutunu belirtir. overflow:hidden özelliği, kapsam dahilinde olmayan tüm öğeleri öğenin içinde gizler.

container.slider geniş bir genişliğe ayarlanmıştır. Tüm slaytları içine sığdırmak için bu gereklidir.

Slaytlar, float:left özelliği kullanılarak hizalanır.

Sürgü bloklarının şematik yerleşimi aşağıda gösterilmiştir.

Senaryo

Slaytların hareketi, container.slider öğesinin margin-left özelliği sorunsuz bir şekilde değiştirilerek yapılacaktır.

$(işlev () ( var genişlik= $(".slider-box" ) .width () ; // Kaydırıcı genişliği. aralık = 4000 ; // Slaytları değiştirme aralığı.$(".slider img:last") .clone() .prependTo (".slider" ) ; // Son slaydın bir kopyası başa yerleştirilir.$() .eq (1) .clone() .appendTo (".slider" ) ; // İlk slaydın bir kopyası sona yerleştirilir. // Container.slider, bir slayt genişliği kadar sola kaydırılır. setInterval("animasyon()" , aralık) ; // Slayt geçişini gerçekleştirmek için animasyon() işlevini çalıştırır.) ) ; function animasyon() ( var margin = parseInt($(".slider") ) .css ("marginLeft" ) ) ; // Geçerli blok offset.slider genişlik= $(".slider-box" ).width() , // Kaydırıcı genişliği. slidersAmount= $(".slider" ) .children() .length ; // Kaydırıcıdaki slayt sayısı. if (margin!= (- width* (slidersAmount- 1 ) ) ) // Geçerli slayt son slayt değilse,( kenar boşluğu= kenar boşluğu genişliği; // daha sonra kenar boşluğu değeri, slaydın genişliği kadar azaltılır.) başka ( // Son slayt gösteriliyorsa,$(".slider") .css("sol kenar boşluğu", -width) ; // ardından block.slider ilk konumuna döner, kenar boşluğu=- genişlik* 2 ; ) $(".slider" ) .animate (( marginLeft: margin) , 1000 ) ; // Block.slider 1 slayt sola hareket eder. } ;

Sonuç, sonsuz otomatik kaydırmalı basit bir kaydırıcıdır.

Ancak sizinle JS'nin temellerini tartıştığımız için, tabanı incelemek için sadece JavaScript dilini kullanarak en basit kaydırıcının nasıl oluşturulacağını anlatacağım. Pekala, malzemenin analizine geçelim!

Ne tür kaydırıcılar var ve bunlara nerede ihtiyaç duyulabilir?

En azından bazı fotoğrafların bulunduğu tüm web servislerinde görüntüleri izlemek için uygun galeriler oluşturmak gerekir. Bunlar çevrimiçi mağazalar, portföy siteleri, haber ve eğitim hizmetleri, şirketlerin web siteleri ve fotoğraflı eğlence mekanları vb. olabilir.

Ancak bu, kaydırıcıların standart bir kullanımıdır. Bu tür teknolojiler, müşterileri promosyon ürünlerine, hizmetlere çekmek veya işletmelerin faydalarını açıklamak için de kullanılır.

Temel olarak, müşterilerden "Carousel" gibi galerilerde uygulama yapmaları istenir. Bu, kullanıcı tarafından slaytları ileri ve geri değiştirebilme özelliği ile görüntüleri büyük boyutta görüntülemek için kullanışlı bir araçtır. Bu durumda, resimlerin kendisi genellikle belirli bir süre sonra otomatik olarak değişir. resimlerin bir daire içinde tekrarlanması nedeniyle böyle bir mekanizma takma adı verildi.

Bugün, isterseniz, İnternette bir dizi fotoğrafı görüntülemek için en sıra dışı ve çekici eklentileri bulabilirsiniz.

Bağımsız aktivite

Şimdi kaydırıcımızı oluşturalım. Bunu uygulamayı öğrenmenin bu aşamasında, saf kullanmanızı öneririm. Bu, bir daire içindeki resimleri otomatik olarak değiştirecektir.

Aşağıda uygulamamın kodunu ekledim. Yol boyunca sizin için yorum bıraktım.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

• 
• 
• 

Umarım css ve html kodunda sorun yaşamamışsındır. Ancak senaryonun çalışmasını sökmenin gerekli olduğunu düşünüyorum. Öyleyse yazılanları deşifre etmeye devam edelim.

Yani, önce yöntemi kullanarak sorguSelectorTümü değişken Kaydırıcım Belirtilen aralıktaki tüm öğelerin bir listesini atıyorum. Bu girişi belirtir

document.querySelectorAll("#slides .slide")

Böylece, içinde Kaydırıcım dört elementten oluşan bir koleksiyon saklanır.

Ardından, bir değişkene atayarak hangi görüntünün gösterilmeye başlayacağını belirledim. geçerli resim sıfır. Slayt değişikliğinin 2,7 saniye sonra gerçekleşeceğini ve işleme fonksiyonunun çağrılması gerektiğini belirttikten sonra sonraki slayt.

Gelelim fonksiyonun kendisine.

Başlangıçta, mevcut liste öğesi için sınıfların tanımını değiştiririm, yani. yeniden yazma" kaymagösteriliyor" üzerinde " kayma". Böylece görüntü görünmez olur.

Şimdi, ekranda görüntülenecek olan koleksiyonun yeni bir öğesini tanımlıyorum. Bunu yapmak için mevcut +1 pozisyonunu alıyorum. Ayrıca sahip olduğum slayt sayısının geri kalanı (%) olan bir bölme kullandığımı fark etmişsinizdir. Gösteriyi yeni bir çevrede başlatmak için kulaklarla yapılan bu aldatmaca gereklidir. İşte tam anlamıyla nasıl görüneceği:

Ve şimdi sınıfların açıklamasını alınan öğeye atadım. kaymagösteriliyor". Gördüğünüz gibi, her şey armut bombardımanı kadar kolay uygulanıyor.

İlginiz için teşekkür ederiz. Abonelerimden oluşan gruba katılmayı, yeni makaleler okumayı ve elbette en sevdiğiniz yayınların bağlantılarını arkadaşlarınızla paylaşmayı unutmayın. JavaScript öğrenmede iyi şanslar. Güle güle!

Saygılarımla, Roman Chueshov

Okumak: 256 kez

Şu anda Batı uygarlığının karşı karşıya olduğu en büyük sorunlardan biri, çok sayıda içeriğin küçük bir alanda nasıl gösterileceğidir.

Etkili bir çözüm, endüstride bilinenleri kullanarak içeriği sıralı bloklar halinde düzenlemektir ( ve çevrimiçi toplulukta) İçerik Kaydırıcısı olarak adlandırılır. Duymamış olabilirsiniz, ama bahse girerim kesinlikle görmüşsünüzdür.

Hafızanızı tazelemek ve ne yaratacağımız hakkında size bir fikir vermek için aşağıda içerik kaydırıcı örneği:

Bu yazıda, buna çok benzeyen kendi güzel içerik kaydırıcınızı nasıl oluşturacağınızı göstereceğim. Yalnızca bir içerik kaydırıcısı oluşturmanın ötesinde, benzer bir öğe oluşturmak için HTML, CSS ve JavaScript'in birlikte nasıl çalıştığı hakkında çok şey öğreneceksiniz. Genel olarak, birçok yeni şey sizi bekliyor, o yüzden başlayalım.

Nasıl çalıştığına genel bakış

Her şeyin çalışması için gerekli olacak HTML , CSS ve JavaScript'e derinlemesine dalmadan önce, küçük bir adım geriye gidelim ve içerik kaydırıcımızı oluşturan öğeleri düşünelim.

İlk olarak, kaydırıcıya göndermek istediğimiz içeriğe sahibiz:

İçerik her şey olabilir. Görüntüler, standart HTML içeriği, çeşitli içerik türlerinin bir kombinasyonu vb. olabilir. Gerçekten önemli değil. İçeriğimiz DIV öğelerine sarılabilirse, sorun yok. Her bir içerik bloğunun aynı genişlik ve yükseklikte olduğundan emin olmanız yeterlidir.

Bir kaydırıcıyı görüntülerken, aynı anda yalnızca bir içerik bloğu görürsünüz. Fazladan bir adım atılmazsa, içerik aynı anda orijinal boyutunda görüntüleniyorsa, kaydırıcıyı görsel olarak çok çekici olmayan bir şeye dönüştürebilir.

Bunu iki adımda düzelteceğiz. İlk olarak, içeriği, içerik bloklarından biriyle aynı boyutta bir kapsayıcıya saracağız:

İçeriği kapsayıcıya sardıktan sonra, aynı anda yalnızca bir bloğun görüntülenmesini sağlamak için içerik bloğunun etrafındaki tüm öğeleri keseriz:

Bir sonraki adım, içeriğin geri kalanını görüntüleyebilmektir. Bu çeşitli şekillerde yapılabilir. Bu makalede, tıklayabileceğiniz bir dizi dairesel bağlantı kullanıyoruz:

Kaydırıcının çalışması için yapılacak son şey, her bağlantıyı tıklanabilir hale getirmektir. Bu, bazı JavaScript ile birlikte bazı CSS ince ayarları gerektirecektir, ancak hiçbir şey çok karmaşık değildir. Ve bu, sevgili dostlarım ve düşmanlarım, bir içerik kaydırıcısının nelerden oluştuğuna dair kısa bir genel bakıştır.

Sonraki birkaç bölümde, kaydırıcımızı çalıştıracak gerçek HTML, CSS ve JavaScript koduna bakacağız.

İçerik

Özette ele aldığımız adımları takip edelim ve içerikle başlayalım. Öncelikle bir başlangıç ​​noktası oluşturmalıyız. Boş bir HTML belgesi oluşturalım ve HTML5 başlangıç ​​şablonundan aşağıdaki kodu buna ekleyelim:

Bu işaretleme, belgenin yapısını vermekten başka bir şey yapmaz, ancak içeriğimizi daha fazla eklememize izin verecek ilk adımdır. Bunu bir sonraki bölümde yapalım.

içerik ( bu sefer gerçek)

Gövde öğesinin içine aşağıdaki HTML kodunu ekleyin:

Stil etiketlerinin arasına, içeriğimizin şeklini ve rengini tanımlayan aşağıdaki stil kurallarını ekleyin:

#wrapper ( genişlik: 2200 piksel; konum: göreceli; sol: 0 piksel; ) .content ( kayan nokta: sol; genişlik: 550 piksel; yükseklik: 350 piksel; beyaz boşluk: normal; arka plan tekrarı: tekrarsız; ) #itemOne ( arka plan -color: #ADFF2F; arka plan resmi: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo (arka plan rengi: #FF7F50; arka plan resmi: url("http ://www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( background-color: #1E90FF; background-image: url("http://www.kirupa.com/images/pinkSquare.png "); ) #itemFour ( arka plan rengi: #DC143C; arka plan görüntüsü: url("http://www.kirupa.com/images/graySquare.png"); )

Şimdi sayfayı görüntülediğinizde, ekran görüntüsünde gösterilene benzer bir şey göreceksiniz:

Düzgün bir şekilde yan yana dizilmiş dört büyük dikdörtgen blok göreceksiniz. Ekran çözünürlüğünüze ve tarayıcı pencerenizin boyutuna bağlı olarak, tüm dikdörtgenleri görmek için biraz sağa veya sola kaydırmanız gerekebilir.

Şimdi biraz dikkat edin ve gördüğünüzü neden gördüğünüzü anlamaya çalışın. HTML işaretlemesini inceleyin ve belgenizdeki öğeleri anlayın.

Kullandığı class ve id değerlerine dikkat edin çünkü eklediğiniz stil kurallarına uyacaktır. Stil kurallarına ve bunların oluşturulmasının sonucu nasıl etkilediğine bakın. Şimdi tüm bunları özetleyelim.

Ne yaptık

HTML işaretlememizde gördüğünüz içerik, her biri bir içerik sınıfı değeri içeren dört div öğesinden oluşur. Bu sınıf değeri, her bloğun boyutunu belirleyen .content stil kuralından gelir: 550 piksel genişlik ve 350 piksel yükseklik:

İçerik ( kayan nokta: sol; genişlik: 550 piksel; yükseklik: 350 piksel; beyaz boşluk: normal; arka plan tekrarı: tekrar yok; )

.content stil kuralı ayrıca kayan değeri sola ayarlar. Sonuç olarak, div öğeleri sıralanır. Ve bu stil kuralının bildirdiği son şey, beyaz boşluk özelliğidir. Bu özellik, paragraftaki metnin nasıl kaydırılacağını belirler.

Bu özelliği sadece kolaylık sağlamak için kullandım. Bu makalenin kapsamını aşmaya ve div öğelerinin her birine içerik eklemeye karar verirseniz, metninizin düzgün bir şekilde sarılacağı için bana minnettar olacaksınız veya bu özelliği kaldıracaksınız ( veya başka bir değere ayarlayın) görmek istemiyorsanız.

Bu noktada div elemanımız uygun şekilde takılmış ve sıralanmıştır. Tamamen görünmez olması çok kötü:

Bu sorunu çözmek için, her div'e id değerleri aracılığıyla benzersiz bir kimlik veriyoruz: itemOne , itemTwo , itemThree , anditemFour . Stiller bölümünde, bu id değerleriyle eşleşen dört stil kuralımız var:

#itemOne ( background-color: #0099CC; background-image: url("http://www.kirupa.com/images/blueSquare.png"); ) #itemTwo ( background-color: #FFCC00; background-image: url("http://www.kirupa.com/images/yellowSquare.png"); ) #itemThree ( background-color: #FF6666; background-image: url("http://www.kirupa.com/images" /pinkSquare.png"); ) #itemFour (arka plan rengi: #E8E8E8; arka plan resmi: url("http://www.kirupa.com/images/graySquare.png"); )

Gördüğünüz gibi, bu stil kuralları içeriğimiz için yalnızca arka plan rengini ve arka plan resmini tanımlar. Şu andan itibaren, div öğeleri artık görünmez değil. 550 x 350 piksel boyutunda farklı renklerde dikdörtgenler olarak görüntülenirler.

Neredeyse tamamız. Bakacağımız son şey, id sarmalayıcısını içeren gizemli div'dir:

Bu öğe, tüm içeriğimizi tek bir kapsayıcıda sarar. Bu, tüm içeriği içerik blokları etrafında kırpmaktan bahsettiğimde aklımdaki kapsayıcı değildi.

Bu konteyner biraz farklı tasarlanmış. Kelimenin tam anlamıyla içeriği sarar, böylece hepsini görebiliriz.

İlgili #wrapper stil kuralı bu görevi yerine getirir:

#wrapper ( genişlik: 2200 piksel; konum: göreceli; sol: 0 piksel; )

İlk olarak, bu stil kuralı, sarmalayıcı elemanın genişliğini 2200 piksel olarak tanımlar. Yani, 4 ile çarparak elde ettiğiniz içeriğimizin toplam genişliği ... ( div sayısına göre) 550 piksel.

Konum ve sol özellikler, kabı istediğimiz herhangi bir yere taşıma yeteneğini ayarlamak için vardır. Konum özelliğini göreceli olarak ayarlayarak, bu öğeyi standart belge yapısından çıkarır ve o anda bulunduğu yere göre piksel değerlerini kullanarak herhangi bir yere yerleştirmeyi mümkün kılarız.

Div içerik bloklarımız bu div'in çocukları olduğundan, üst div'in yerleştirildiği yere çekilirler. Tahmin edebileceğiniz gibi, bu çok uygun!

İçeriği kırpma

Bir önceki bölümde, içerik bloklarının render edilmesini sağladık. Yapacağımız bir sonraki şey, içeriğimizi herhangi bir zamanda yalnızca bir kaydırma kutusu görünecek şekilde kırpmaktır.

Ana konteynere burada ihtiyacımız olacak. HTML kodunuzdaki tüm div'leri, contentContainer kimliğine sahip bir div'e sarın:

Sadece iki yeni satır ekleyin ve isterseniz sadece HTML'yi düzgün bir şekilde düzenlemek için orada olan satır girintileri ekleyin.

Şimdi, sarılmış (bir kez daha) içeriğimize bakarsanız, yeni bir şey görmeyeceksiniz. Öğeleri başka bir div'e sarmak anlamlı bir şey yapmaz - içeriği kırpmak için yapmak istediğimizden çok daha az.

Bu anlamlı eylemi eklemek için aşağıdaki #contentContainer stil kuralını oluşturun:

#contentContainer ( genişlik: 550 piksel; yükseklik: 350 piksel; kenarlık: 5 piksel siyah düz; taşma: gizli; )

contentContainer öğesinin boyutunu 550 piksele 350 piksel olarak ayarladığınızı unutmayın. Yani, içerik bloklarının her biri ile tam olarak aynı boyutta. Kaydırıcıyı biraz öne çıkarmak için 5 piksel genişliğinde siyah bir kenarlık belirledik.

Yaptığımız son şey, taşma özelliğini gizli olarak ayarlayarak içeriği kırpmaktır. Bu, contentContainer öğesinin dışındaki her şeyi gizlemek içindir.

Hep birlikte bize tarayıcıda aşağıdaki resmi verir:

Şu anda yalnızca ilk bloğunuzun içeriğinin görünür olduğunu unutmayın. İçeriğin geri kalanı hala orada, taşma özelliğinin gizli değeri aracılığıyla kırpmamız nedeniyle şimdi gizlendi.

Gezinme bağlantıları

Böylece onlara ulaştık! Tamamen çalışan bir kaydırıcıya sahip olmaya yaklaşıyoruz. Bu bölümde, diğer içerik bloklarını görmek için tıkladığınız öğeler olan gezinme bağlantılarına göz atacağız.

Bu bağlantıların, bizim contentContainer'ımızla veya halihazırda sahip olduğumuz herhangi bir HTML parçasıyla hiçbir ilgisi yoktur. Vurgulanan satırları zaten sahip olduğumuz HTML koduna eklemeniz gerekir (ancak komut dosyası etiketinin üzerinde):

Şimdi eklediğiniz HTML'ye hızlıca bir göz atalım. İlk olarak, sırasız bir listeyi tanımlayan navLinks kimliğine sahip bir div'imiz var. Bağlantıların kendileri liste öğeleri olarak sunulur.

Her liste öğesi, bir itemLinks sınıf değerinin yanı sıra data-pos adlı özel bir data-* niteliğini içerir. Bu özniteliğe birazdan geri döneceğiz, ancak şimdilik sadece var olduğuna dikkat edin.

Yeni eklediğimiz HTML'ye stil vermemiz gerekiyor. Stiller bölümünde aşağıdaki kuralları ekleyin:

#navLinks ( metin hizalama: merkez; genişlik: 550 piksel; ) #navLinks ul ( kenar boşluğu: 0 piksel; dolgu: 0 piksel; görüntü: satır içi blok; kenar boşluğu: 6 piksel; ) #navLinks ul li ( kayan nokta: sol; metin- hizalama: merkez; kenar boşluğu: 10 piksel; liste stili: yok; imleç: işaretçi; arka plan rengi: #CCCCCC; dolgu: 5 piksel; kenarlık yarıçapı: %50; kenarlık: siyah 5 piksel katı; ) #navLinks ul li:hover ( arka plan rengi: #FFFF00; ) #navLinks ul li.active ( arka plan rengi: #333333; renk: #FFFFFF; anahat genişliği: 7px; ) #navLinks ul li.active:hover ( arka plan rengi: #484848; renk: #FFFFFF; )

Vay canına, çok fazla CSS. Çok fazla kod olmasına rağmen, içinde gerçekten benzersiz veya ilginç bir şey yok. CSS kodunun bir kısmı, yan yana görüntülenen bağlantılarla yatay bir menünün oluşturulmasını sağlar.

Kodun geri kalanı, her bağlantının görünümünü ve fareyle üzerine gelindiğinde ilgili vurgusunu tanımlar.
Ancak bir noktada, daha ayrıntılı olarak durmaya değer.

Bunun nedeni, aktif sınıfa özgü iki stil kuralıdır:

#navLinks ul li.active ( background-color: #333333; color: #FFFFFF; anahat-width: 7px; ) #navLinks ul li.active:hover ( background-color: #484848; color: #FFFFFF; )

Hatırlarsanız, HTML kodumuzda active sınıf değerine sahip bir öğe yoktu. Buna rağmen, aktif sınıf bağlantılarımızdan birine dinamik olarak eklendiğinden bu stil kuralları geçerli olmaya devam edecektir.

Tüm bunları şu anda anlamakta zorlanıyorsanız, endişelenmeyin, çok yakında ayrıntılı olarak ele alacağız.

Şu anda kaydırıcımız şöyle görünüyor:

Kaydırıcınız doğru görünmüyorsa, yazım hatası yapmış olabilirsiniz... veya başka bir şey. Öyle mi oldu?

Kaydırıcının kendisini oluşturma

Tamam, bu noktada, çalışan bir kaydırıcıya çok benzeyen bir şeyimiz var. Ancak, bağlantılardan herhangi birine tıkladığınızda kesinlikle hiçbir şey olmuyor.

Şimdi çalışan bir kaydırıcı oluşturalım, ancak ondan önce biraz JavaScript ve bazı harika öğeler ekleyelim... yani, güzel CSS geçişleri.

JavaScript ekleme

Komut dosyası etiketinin içine aşağıdaki JavaScript kodu satırlarını ekleyin:

// sadece DOM istemek... sanki bir patrondan izin istiyormuş gibi! var linkler = document.querySelectorAll(".itemLinks"); var sarmalayıcı = document.querySelector("#wrapper"); // activeLink, aktif öğe için bir etiket sağlar var activeLink = 0; // için olay izlemeyi ayarla (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); // определяем элемент для activeLink link.itemID = i; } // устанавливаем первый элемент в качестве активного links.classList.add("active"); < links.length; i++) { links[i].classList.remove("active"); } } // Обработчик изменяет позицию слайдера, после того, как мы убедились, // что в качестве активной обозначена нужная нам ссылка. function changePosition(link) { link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; }

Tek yapmamız gereken ani slayt geçişleri yerine yumuşak bir geçiş sağlamak.

Geçiş ekleme

Şu anda henüz düzgün bir şekilde kaymayan bir içerik kaydırıcımız var. Bunun yerine, slaytlar aniden birinden diğerine atlar. İçeriğin sorunsuz bir şekilde kaydırılmasını sağlamak için bir CSS geçişi kullanalım. Kaydırıcımıza olası geçişlerden birini ekleyelim.

#wrapper stil kuralını bulun ve ona bir satır ekleyin:

Eklediğiniz satır geçişi tanımlar. İçinde belirtilen özellik, sol özellik değiştiğinde geçişin gerçekleşmesi gerektiğini belirtir. Geçişimiz 0,5 saniye sürecek ve geçişin başlangıcında süreci hızlandırmak ve sonunda yavaşlatmak için içeri girme kolaylığı zamanlama işlevini kullanacak.

Geçiş özelliği W3C'de hala bazı değişikliklerden geçtiğinden, herhangi bir modern tarayıcının geçişi uygulayabilmesini sağlamak için önekleri kullanmanız gerekecektir. Bununla uğraşmak istemiyorsanız, aşağıdaki komut dosyasını script etiketinin hemen önüne ekleyin:

Hayır, bu komut dosyası kötü amaçlı bir şey yapmaz. Bu barındırılan sürümdür. Leia Verou kitaplıkları - öneksiz. Kaydırıcıların nasıl çalıştığı hakkında bir sürü şey öğrenmek yerine, onun komut dosyasını indirebilir, kendi sunucunuza yükleyebilir ve kendi sürümünüze bağlantı verebilirsiniz.

Her neyse, şu anda belgeyi görüntülüyorsanız, gezinme bağlantılarından herhangi birine tıkladığınızda içeriği sorunsuzca dışarı kaydıran çalışan bir içerik kaydırıcınız olmalıdır. Bu, bu makalenin en başında yayınlanan örnekte gördüğünüzle aynı olmalıdır.

Nihayet!!!

Ayrıştırma kodu (ve diğer her şey!)

Artık çalışan bir içerik kaydırıcımız olduğuna göre, kodun hepsini nasıl birbirine bağladığını en baştan anlamaya çalışalım.

Gerçekten Neler Oluyor

İçerik kaydırıcısını yükledikten sonra, ilk içerik bloğunun nasıl görüntülendiğini görebilirsiniz. İçeriğin geri kalanı kesilir ve görünümden gizlenir:

Herhangi bir bağlantıya tıklamak, ilgili içerik bloğunu görüntüler. Görünür alanda içeriğin hangi bölümünün görüntüleneceğini, kaydırıcı, her bir gezinme bağlantısı ile her içerik bloğunun piksel konumu arasındaki sıkı ilişki nedeniyle bilir.

Bu bağlantıyı anlamaya çalışalım. Bildiğimiz birkaç şey var. İçerik bloklarımızın her birinin 550 piksel genişliğinde olduğunu biliyoruz. Ayrıca ilk içerik bloğumuzun yatay olarak 0px olarak ayarlandığını da biliyoruz.

Bunu nasıl biliyoruz? Tüm içerik bloklarımız, tüm içeriğimizi kapsayan bir sarmalayıcı öğenin içine sarılır ve sarmalayıcı öğenin sol kenarı 0 piksellik bir konuma sahiptir:

Bu, #wrapper stil kuralında belirtilmiştir. Bu stil kuralından tüm içerik bloklarının sola kaydırıldığını ve yan yana sıralandığını da biliyoruz.

Bunu bilerek, aşağıdaki gibi tüm içerik blokları için konumları hesaplayabiliriz:

İlk blok 0 pikselde bulunur. Birinci içerik bloğunun genişliği, ikinci bloğun konumudur. Yani 550 piksel. Sonraki her blok, bir öncekinden 550 piksel daha fazla bir konuma sahiptir.

Her içerik bloğunun tam piksel konumunu bildiğimiz için, bu bilgiyi içerik kaydırıcısına sarmalayıcı öğesini doğru yere taşımasını söylemek için kullanabiliriz, böylece istediğimiz içerik parçası görünür olur.

Veri-pos özelliği!

Harika, artık tüm içerik bloklarının konumlarını biliyoruz. Henüz ele almadığımız şey, içerik bloğunun piksel cinsinden konumunu bilmenin, kaydırıcı penceresinde doğru bloğu görüntülememize nasıl yardımcı olacağıdır.

Bir bağlantı tıklandığında belirli bir içerik bloğunun görüntülenmesi gerektiğini nasıl belirtebiliriz? Sadece. Her bağlantı, karşılık geldiği içerik bloğunun tam konumunu (piksel olarak) içerir:

data-pos özniteliğinin bağlantıların her birine data-pos özniteliklerinin her birinin değerini söylediğine dikkat edin. İçerik bloklarının her birinin orijinal yatay konumunun negatif değerine eşittirler.

Bir bağlantıya tıkladığımızda, o bağlantıyla ilişkili data-pos özniteliğini okumak ve ardından sarmalayıcı öğemizin piksel konumu değerini öznitelikten okunan değere geçirmek için JavaScript kullanılır.

Örneğin, üçüncü bağlantıya tıkladıktan sonra olan budur:

Üçüncü bağlantı, 1100 piksellik bir data-pos değerine sahiptir. Bu, üçüncü içerik bloğunun görünür alanda görüntülenmesi için kapsayıcı kaplamasının kaç piksel hareket etmesi gerektiğine karşılık gelir. Başka bir bağlantıya tıklamak, sarmalayıcı öğe özelliğini o bağlantının data-pos özniteliğinde bulunan değere ayarlar.

Tamam, daha önce bahsettiğim bağlantılar ve içerik konumu arasındaki ilişkiyi ele aldık. Şimdi, bu bölümde yazdığım her şeyi tarayıcı tarafından anlaşılacak bir şeye dönüştürecek olan JavaScript'i ele almamız gerekiyor.

Her şey JavaScript'le ilgili

Artık içerik kaydırıcımızda her şeyin nasıl çalıştığına dair kavramsal bir anlayışa sahip olduğunuza göre, bildiğiniz her şeyi uygulayan JavaScript'e bir göz atalım. Tüm makalelerimde yaptığım gibi, JavaScript'in her satırını parçalayalım ve kaydırıcımız için ne yaptığını görelim.

En tepeden başlayalım:

var linkler = document.querySelectorAll(".itemLinks"); var sarmalayıcı = document.querySelector("#wrapper");

Bağlantılar değişkeni, belgemizdeki itemLinks sınıf değerine sahip tüm öğelerin bir kümesini alır. Bu öğeler, gezinme bağlantıları olarak işlev gören liste öğeleridir. Sarıcı değişken, linklere çok benzer. id sarmalayıcısı olan bir öğeye işaretçi alır.

querySelector ve querySelectorAll

DOM'yi nasıl sorguladığıma dikkat edin. getElementsByClassName veya getElementById gibi bir şey kullanmak yerine, yeni querySelectorAll ve querySelector işlevlerini kullanıyorum.

Daha sonra bu değişkenlerin her ikisini de kullanacağımızı göreceksiniz, bu yüzden onları aklınızda bulundurun.

var activeLink = 0;

activeLink değişkeni, görüntülenmekte olan içeriğin konumunu depolamak için kullanılır. Biraz sonra eylemde açıkladığımda bu değişkenin anlamını daha iyi anlayacaksınız.

Sonraki satır kümesi bir for döngüsüdür:

// için olay izlemeyi ayarla (var i = 0; i< links.length; i++) { var link = links[i]; link.addEventListener("click", setClickedItem, false); }

Burada link değişkenlerinin her bir elemanı üzerinde yinelenir ve ona bir olay dinleyicisi atarız. Bu olay izleyici, bir tıklama olayı algılandığında setClickedItem işlevini çağırır.

Sonraki satır bir dizi değişikliğe neden olur:

// ilk elemanı aktif linkler olarak ayarla classList.add("active");

Aktif sınıfın değerini ilk gezinme bağlantısının öğesine ekliyoruz. Bu, activeLink değerini linkler dizisine geçirerek yapılır. activeLink 0 olduğundan, dizi genellikle ilk öğeyi alır ve aktif sınıfın değerini eklemek için classList API'sini kullanır.

Bu kod satırı çalıştırıldıktan sonra aşağıdaki stil kurallarına dikkat ettiğimizi hatırlıyor musunuz?

Pekala, şimdi bu stil kuralları devreye giriyor ve etkin gezinme bağlantısının diğer etkin olmayan bağlantılar listesinden öne çıkmasına yardımcı oluyor. Bu stil kurallarına biraz sonra geri döneceğiz ve onlara daha detaylı bakacağız.

Bakacağımız sonraki şey, bağlantılardan herhangi biri tıklandığında çağrılan setClickedItem olay işleyicisidir:

function setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Bu işlev öncelikle removeActiveLinks'i çağırarak tüm bağlantılarınızın durumunu devre dışı olarak değiştirir. Bu özelliğe biraz sonra göz atacağız.

Bu işlevin yaptığı diğer önemli şey, activeLink üzerindeki seçili öğenin itemID özelliğinin değerini değiştirmesidir. Bu, activeLink'in her zaman kaydırıcıda görüntülenmekte olan içerik bloğuna karşılık gelen sayıyı göstermesini sağlar.

Bu ikisini yaptıktan sonra oldukça sıkıcı) eylemleri, bu işlev, seçilen öğeye bir başvuruyu changePosition işlevine iletir. Bu da bir sonraki paragrafta ele alacağım birkaç harika şey yapar.

İşte ilginç değişikliklerin gerçekleştiği yer! Biraz ileriye atlayalım ve changePosition işlevine bakalım:

// İşleyici, ihtiyacımız olan bağlantının aktif olarak işaretlendiğinden // emin olduktan sonra kaydırıcının konumunu değiştirir. function changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )

Bu işlev iki şey yapar:
BEN. Halihazırda etkin olduğunu belirtmek için seçilen bağlantının görsel görüntüsünü değiştirir.
II. Sarma elemanının konumunu ayarlar.

Bu iki şeye daha detaylı bakalım.

Seçili/etkin bağlantının görsel görüntüsünü değiştir

Daha önce bahsettiğim şeyi anlamanıza yardımcı olmak için gezinme bağlantılarınız iki durumdan birinde olabilir. Bu durumlar, kullanıcının şu anda hangi içerik bloğunun etkin olduğunu görmesi içindir:

Bu şekilde, dördüncü bağlantıya karşılık gelen içerik bloğunun şu anda etkin olduğunu ve ilk üç bağlantının etkin olmadığını hemen belirleyebilirsiniz.

Görsel görünümdeki bu değişiklik, CSS sınıfları eklenip kaldırılarak yapılır. Aktif sınıf, aktif bağlantıya eklenir. Aktif olmayan tüm linkler aktif bir sınıf değeri içermez. RemoveActiveLinks işlevine baktığımızda bunun nasıl çalıştığını anlayacaksınız.

Her durumda, daha önce aşağıdaki iki stil kuralını çağırdığımızı hatırlarsınız:

#navLinks ul li.active ( background-color: #333333; color: #FFFFFF; anahat-width: 7px; ) #navLinks ul li.active:hover ( background-color: #484848; color: #FFFFFF; )

setClickedItem fonksiyonumuzda ( linke tıklanması sonucunda çağrılacak fonksiyon olarak da bilinir.), önce removeActiveLinks'i çağırırız:

function setClickedItem(e) ( removeActiveLinks(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Bu işlev, tüm gezinme bağlantıları için etkin sınıfın kaldırılmasından sorumludur:

function removeActiveLinks() ( için (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Bunu küresel bir sıfırlama düğmesi olarak düşünebilirsiniz. Linkler değişkeninde depolanan gezinme bağlantıları arasında döngü yapar ve classList.remove() kullanarak aktif sınıfın değerini kaldırır. Gezinme bağlantılarından herhangi birinin aktif bir sınıf değeri içermesi durumunda, bunun artık olmayacağını unutmayın.

Böylece tüm linklerinizden aktif sınıfı nasıl kaldıracağınızı görmüş olduk. Sırayla bir sınıf eklemek çok basittir:

function removeActiveLinks() ( için (var i = 0; i< links.length; i++) { links[i].classList.remove("active"); } }

Aktif sınıf değerini kaldırmak için daha önce kullandığımız ClassList'in aynısını, aktif sınıf değerini seçilen bağlantıya geri eklemek için kullanıyoruz. Bu seçili bağlantı, kendisine iletilen bir bağlantı bağımsız değişkeni alır.

Kabuk konumunu ayarlama

Neredeyse tamamız! Tüm bu adımlardan sonra nihayet kaydırıcı sarmalayıcı öğesinin konumunu ayarlayan ve seçtiğiniz bağlantıya karşılık gelen içerik bloğunu görüntüleyen changePosition işlevine ulaştık.

Aşağıdaki parçaya bakalım:

function changePosition(link) ( link.classList.add("active"); var position = link.getAttribute("data-pos"); wrapper.style.left = position; )

Konum değişkeni, tıkladığımız bağlantının data-pos özniteliğinin değerini saklar. data-pos özniteliğinin değerini aldıktan sonra sarmalayıcı elemanın sol CSS özelliğini de aynı değere ayarlıyoruz.

Bu, kaydırıcı etkisinin uygulanmasıyla nasıl ilişkilidir? Bir süre önce #wrapper stiline bir kural eklediğimizi hatırlıyor musunuz?

#wrapper ( genişlik: 2200 piksel; konum: göreli; sol: 0 piksel; geçiş: sol .5s kolay giriş-çıkış; )

Sol özellik değiştiğinde etkili olacak geçişi tanımladığımızı unutmayın. Tahmin edin JavaScript'imiz ne yapıyor? Sol özelliği ayarlar! CSS geçişi bu değişikliği algılar ve içeriğin taşınmasını tetikler. Tüm bunların işe yaraması için tek ihtiyacınız olan bir satır JavaScript eklemek.

Sizi bilmem ama benim için inanılmaz. Bu, birkaç yıl önce kaydırıcı efektini işlemek için çok çaba ve kod harcamak zorunda kaldığımızda hayal bile edemeyeceğimiz bir şeydi. İçerik kaydırıcımızı güzel yapan da budur.

Aynen böyle, sıfırdan bir içerik kaydırıcısı oluşturduk ve (daha da önemlisi) nasıl çalıştığını öğrendik.

İçerik kaydırıcı iyileştirmeleri

Az önce oluşturduğumuz içerik kaydırıcısı oldukça havalı, ancak daha da havalı hale getirebiliriz. Bu bölümde, çok yararlı bulabileceğiniz iki iyileştirmeye bakacağız. Bu arada bazı yeni JavaScript ve CSS püf noktaları öğreneceğiz. Şimdi gençlerin dediği gibi olacak: “Ağlıyorum!”.

translate3d dönüşümü ile kaydırma

Şu anda, sarmalayıcı div öğesine uygulanan sol CSS özelliğinin değerini değiştirerek slaytlarımız kaydırılıyor. left özelliğini kullanarak kaydırıcıyı çalıştırıyoruz ancak bu yöntemin ciddi dezavantajları var. Pürüzsüz slayt geçişleri sağlamak için donanım hızlandırmayı kullanamazsınız.

Bu, özellikle donanımı sık kullanan düşük İnternet hızlarına sahip mobil cihazlar için geçerlidir ve burada dalgalı, ürkek slaytlar özellikle fark edilebilir.

Bu, slaytların sorunsuz hareket etmesini sağlayacak translate3d dönüştürme işleviyle düzeltilebilir. Bu fonksiyon argüman olarak x , y ve z değerlerini alır ve bu değerlerden herhangi birinin değiştirilmesi hedef elemanın konumunu değiştirecektir.

Bu fonksiyonun bir özelliği de kullanımı sonucunda tarayıcı donanımının konum değişimini hızlandırmasıdır. Biz ne bekliyoruz?

Yapmamız gereken ilk şey #wrapper stil kuralını değiştirmek. Konum bildirimini ve sol özellikleri aşağıdaki kodla değiştirin:

Böylece dönüştürme yardımı ile sarmalayıcı elemanın başlangıç ​​konumu belirlenir.

İlk adım: Yardımcı elemanların eklenmesi

İlk adımda, şu anda sahip olduğumuz ana kodun altına aşağıdaki yardımcı kodu ekleyin:

// // Dönüşümleri kullanma // var transforms = ["transform", "msTransform", "webkitTransform", "mozTransform", "oTransform"]; var transformProperty = getSupportedPropertyName(dönüşümler); // satıcı öneklerini yönetme işlevi getSupportedPropertyName(properties) ( for (var i = 0; i)< properties.length; i++) { if (typeof document.body.style] != "undefined") { return properties[i]; } } return null; }

Bu kod, maksimum sayıda tarayıcı tarafından desteklenmesi için satıcı önekleriyle transform özelliğini ayarlamamıza yardımcı olacaktır.

Bu yazıda bu satırları anlatmayacağım. Bilmeniz gereken tek şey, tüm bu kodun Özelliği transform , msTransform , mozTransform veya oTransform olarak ayarlamaya yardımcı olmasıdır. Kullandığınız tarayıcının kaç yaşında olduğuna bağlı olarak bu değerlerden biri kullanılacaktır.

İkinci aşama: Ahoy!

changePosition işlevinde aşağıdaki kod satırlarını bulun:

function changePosition(link) ( var position = link.getAttribute("data-pos"); wrapper.style.left = position; link.classList.add("active"); )

Bunları aşağıdaki kodla değiştirin:

function changePosition(link) ( var position = link.getAttribute("data-pos"); var translateValue = "(!LANG:translate3d(" + position + ", 0px, 0)"; wrapper.style = translateValue; link.classList.add("active"); }!}

Bu kod oldukça basit şeyler yapar. translateValue değişkeni, X bölümünün konum değişkeninin değeriyle doldurulduğu translate3d işlevinin dizelerine dayalı bir temsil oluşturur. Bu dize oluşturulduktan sonra, tek yapmamız gereken onu sarmalayıcı elemanın stil nesnesine iletmek.

Karşılık gelen stil özelliğinin tanımının, biraz önce ele aldığımız transformProperty değişkeni tarafından ele alındığını unutmayın.

Şimdi belgeyi görüntülerseniz, kaydırıcıdaki içerik bloklarının bir yerden diğerine atladığını göreceksiniz.

Açıkçası, görmeyi beklediğiniz şey bu değildi. Sorunsuz seyahate ne oldu? Cevap, bir değişikliği daha kaçırdığımızdır. Neyse ki, bunu düzeltmek kolaydır. #wrapper stil kuralına geri dönersek, geçiş bildiriminin şöyle göründüğünü fark ederiz:

#wrapper ( width: 2200px; transform: translate3d(0, 0, 0); geçiş: sol .5s kolay giriş-çıkış; )

Geçişimiz, sol özellikteki değişiklikleri izler. Bu özelliği artık kullanmıyoruz, bu nedenle geçişimiz çalışmaya başlayamıyor. Bu korkunç adaletsizliği düzeltmek için, geçiş bildirimindeki left property anahtar sözcüğünü transform özelliği anahtar sözcüğüyle değiştirin:

#wrapper ( width: 2200px; transform: translate3d(0, 0, 0); geçiş: transform .5s kolay giriş-çıkış; )

Bu değişiklikleri yaptığınızda, kaydırıcımız tekrar eskisi gibi çalışacaktır.

Tek fark, slayt geçişlerinin artık donanımla hızlandırılmış olması ve artık daha sorunsuz çalışacak ve daha fazla cihazda desteklenecek olmasıdır.

Birkaç saniye aralıklarla otomatik slayt değişimi

Şu anda slaytlarımız yalnızca gezinme bağlantılarından birine tıkladığımızda değişiyor. Ancak kaydırıcının çalışmasının tek yolu bu değil. Birçok içerik kaydırıcı, içeriği birkaç saniyede bir otomatik olarak kaydırır ve gezinme bağlantılarını kullanarak belirli bir bölüme atlama seçeneği de vardır.

Aşağıda böyle bir içerik kaydırıcısının bir örneğini görebilirsiniz:

Evet, bu, içeriğin kap içinde otomatik olarak kaydırılabilmesi için biraz değiştirilmiş eski kaydırıcımızdır. Bil bakalım bundan sonra ne yapacağız?

Slaytların otomatik olarak kaydırılmasını sağlayalım!

setInterval işlevi bu konuda bize yardımcı olacaktır. Bu işlevin ana görevi, kodun düzenli aralıklarla yürütülmesini sağlamaktır:

window.setInterval(functionToCall, gecikme);

Birkaç saniyede bir ( veya aralık değeri olarak kaç tane ayarladınız), setInterval işlevi, kaydırıcımıza bir sonraki içerik bloğuna gitmesini söyler.

İçerik bittiğinde, kaydırıcı içeriğin başına döner ve baştan başlar. Bu oldukça kolay bir şekilde yapılır. Yalnızca birkaç püf noktası bilmeniz ve içerik kaydırıcınızın nasıl çalıştığına dair sağlam bir anlayışa sahip olmanız gerekir.

Yapmamız gereken ilk değişiklik, bu işi yapmak için gereken ekstra kodu eklemek. Zaten sahip olduğunuz kodun sonuna aşağıdaki satırları ekleyin:

// // Otomatik slayt değiştirme kodu // var timeoutID; function startTimer() ( // goInactive timeoutID'yi çağırmadan önce 2 saniye bekleyin = pencere. setInterval(goToNextItem, 2000); ) startTimer(); function goToNextItem() ( removeActiveLinks(); if (activeLink)< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }

Tüm bu kodun ne anlama geldiğine birazdan bakacağız. Şimdi hepsini ekleyin. Bunu yaptıktan sonra, tarayıcınızdaki içerik kaydırıcısını görüntüleyin. Her iki saniyede bir kapta içerik slaytlarının değiştiğini göreceksiniz.

Yapmamız gereken tek bir önemli değişiklik kaldı. Artık slaytlar, gezinme bağlantısını tıklamış olsanız da olmasanız da her iki saniyede bir değişiyor.

Yapılması gereken doğru şey, bağlantılardan birine tıklandığında zamanlayıcıyı 0'a sıfırlamaktır.Bu değişikliği yapmak için setClickedItem olay işleyicisine aşağıdaki kod satırını ekleyin:

Bundan sonra, içeri girip gezinme bağlantısını tıkladığınızda içerik kaydırıcısı düzgün davranacaktır. Yaşasın!

Otomatik slayt değiştirme açıklaması

Öyleyse, başa çıkmamız gereken tek bir şey kaldı. Şimdi eklediğimiz koda hızlıca bir göz atalım ve neyi neden yaptığını görelim.

goToNextItem/span> işleviyle başlayalım:

function goToNextItem() ( removeActiveLinks(); if (activeLink)< links.length - 1) { activeLink++; } else { activeLink = 0; } var newLink = links; changePosition(newLink); }}

Bu işlev, o anda görüntülenen içeriğin ve onu takip edecek olanın takip edilmesinden sorumludur. Neler olduğunu daha iyi anlamak için aşağıdaki resme bir göz atın:

activeLink değişkeni, o anda görüntülenen içerik bloğunun konumunu gösterir. Her bilgi parçası, linkler dizisi içinde karşılık gelen bir elemanla ilişkilendirilir.

Linkler dizisi içindeki toplam eleman sayısı, length özelliği ile ayarlanabilir. Şimdi kodumuza geri dönelim.

goToNextItem işlevinin if ifadesi, hala içerik olup olmadığını veya kaydırıcının başa dönmesi gerekip gerekmediğini kontrol eder:

if (aktif bağlantı< links.length - 1) { activeLink++; } else { activeLink = 0; }

Şemaya ve koda yakından bakarsanız, mantığı anlayacaksınız. Temel olarak, activeLink için doğru değeri elde ettiğimizde, kaydırıcımızdaki diğer her şey sihirli bir şekilde çalışacaktır.

Sihrin kendisi, changePosition işlevi tarafından sağlanan aşağıdaki iki satırla yapılır ve bu satır, bir sonraki çıktı bloğuna bir işaretçi ile çağrılır:

var newLink = linkler; changePosition(newLink);

Şu anda, kodumuzun işlenme şekli, bağlantıya manuel olarak tıklandığında işlenme biçiminden farklı değil.

Böylece... sonraki içerik parçasına gitmek için goToNextItem işlevindeki koda baktık. Bu slaydı çağırmak için aşağıdaki satırlar otomatik olarak kullanılır:

vartimeoutID; function startTimer() ( // goInactive timeoutID'yi çağırmadan önce 2 saniye bekleyin = pencere. setInterval(goToNextItem, 2000); ) startTimer(); function resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

StartTimer işlevi başlatmak için kullanılır. Bu işlev, goToNextItem işlevinin 2 saniyede bir çağrılmasını sağlayan setInterval çağrısını içerir ( veya 2000 milisaniye).

Bu işlevi basitçe ekleyerek (ve çağırarak) içerik kaydırıcınızın içerik bloklarını otomatik olarak kaydırmaya başlamasına neden olacaksınız.

Sadece zamanlayıcının nasıl sıfırlandığını bulmak için kalır ( setInterval adını verdiğim) bağlantıyı manuel olarak tıkladığınızda. Bununla başa çıkmak için elimizde kalan kod kullanılır.

Zamanlayıcının sıfırlanma yöntemi şu şekildedir: setInterval fonksiyonunu durdurup tekrar başlatıyoruz. Bunun nasıl yapıldığını anlamak biraz zor olabilir.

Çağrılan setInterval işlevinin kimliğini kaydederiz ve daha sonra aynı setInterval işlevini çağırmayı durdurmak için aynı kimliği kullanırız. Açıklamama izin ver.

Bu tanımlayıcıyı timeoutID değişkeninde saklarız ve onu startTimer çağrısında başlatırız ve aynı tanımlayıcıyı resetTimer işlevi içinde kullanmak uygundur:

function resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

clearInterval işlevi, durdurmak istediğimiz setInterval işlevinin kimliğini (timeoutID aracılığıyla) alır.

resetTimer fonksiyonu içinde timer'ı durdurduktan sonra startTimer'ı çağırır ve baştan başlatırız:

function resetTimer() ( window.clearInterval(timeoutID); startTimer(); )

Mantık basit. Kaydırıcıda hangi içerik bloğunun görüntüleneceğini manuel olarak seçtiğinizde zamanlayıcı durur:

function setClickedItem(e) ( removeActiveLinks(); resetTimer(); var clickedLink = e.target; activeLink = clickedLink.itemID; changePosition(clickedLink); )

Yeni bir içerik bloğu seçtikten sonra, kaydırıcı sonraki bloğa geçmeden önce iki saniye duraklar. Tüm bunların takibi startTimer ve resetTimer fonksiyonları ile yapılır.

Çözüm

İşte bu, sadece kullanarak güzel bir içerik kaydırıcısının nasıl oluşturulacağını ele aldık.

HTML

css

ve JavaScript. Ayrıca, performansı artırmak ve içerik bloklarının otomatik olarak değiştirilmesini sağlamak için bazı değişiklikleri nasıl yapacağınızı öğrendiniz.

Kaydırıcının kendisi çok fazla kodla tanımlanmasa da, arkasındaki kavramları parçalamanız biraz zaman alabilir. Sadece yüzeysel olarak değindiğim konuları kapsayan diğer kaynakların bağlantılarını makaleye yerleştirdim. Vaktiniz olduğunda bunları okuyabilirsiniz.

İçerik kaydırıcıları tüm şekil ve boyutlarda gelir. Bazıları içeriğin hem dikey hem de yatay olarak değiştirilebildiği birkaç seviyeden oluşur.

Bazı kaydırıcılar, üst üste yığılmış bloklarla dikey olarak hizalanmış içerik içerir. Oldukça girişimciyseniz ve geçiş yerine CSS kullanmak istiyorsanız

Bir süre önce jQuery öğrenmeye başladım. Sanırım herkes bunun JavaScript'te komut dosyaları (komut dosyaları) geliştirmek ve oluşturmak için en popüler kitaplığın adı olduğunu biliyor. Yardımı ile sitenin muhteşem ve etkileşimli öğelerini oluşturmak çok kolaydır.

Bu yazıda size jQuery kullanarak basit bir evrensel kaydırıcının nasıl oluşturulacağını göstermek istiyorum. Aslında, ağ, bazen çok cazip görünen ve oldukça işlevsel olan çok sayıda hazır kaydırıcıya sahiptir, ancak bunu sıfırdan yapacağız.

Peki, jQuery kaydırıcımızın (HWSlider adını verdiğim) hangi özellikleri not edilebilir?

• Kullanım ve tasarım kolaylığı - Gösterişsiz basit bir komut dosyası oluşturmak istedim, bu yüzden CSS3 animasyonlarını kullanmadım ve kodun çok yönlü ve anlaşılır olduğu ortaya çıktı.
• Slaytlara hem görüntüleri hem de herhangi bir HTML kodunu ekleme yeteneği.
• Slaytlar arasında sırayla (ileri - geri) kaydırma ve her slaydı seçme (1,2,3,4 ...)
• Otomatik olarak oluşturulan bağlantılar (önceki - sonraki ve slayt numaralarıyla). Sadece gerekli sayıda div eklemeniz yeterlidir ve diğer her şey kendi başına hesaplanacaktır. Slayt sayısının sınırsız olduğu belirtilebilir.

Komut dosyası tüm modern tarayıcılarla uyumludur: IE, Opera, Firefox, Safari, Chrome, (çünkü kaydırıcı CSS3 kullanmaz).

HTML işaretlemesiyle başlayalım. Sayfanın veya şablonun html'sini doğru yere eklemeniz gerekir.

Burada her şey basit, gördüğünüz gibi yeni div'ler oluşturarak istediğiniz kadar slayt ekleyebilirsiniz. Bunların içine, resim veya metin içeren bir blok gibi herhangi bir html kodu ekleyebilirsiniz. Tüm js komut dosyalarıyla birlikte yalnızca jQuery kitaplığının kendisini eklemeyi unutmayın. Nasıl yapılacağını bilmiyorsanız, örneğe bakın.

#slider-wrap( /* Kaydırıcı ve düğmeler kaydırma */ genişlik:660 piksel; ) #slider( /* Kaydırıcı kaydırma */ genişlik:640 piksel; yükseklik:360 piksel; taşma: gizli; border:#eee katı 10 piksel; konum:göreli; ) .slide( /* Slide */ width:100%; height:100%; ) .sli-links( /* Slide geçiş düğmeleri */ margin-top:10px; text-align:center;) .sli-links . kontrol-slayt( kenar boşluğu:2px; ekran:satır içi blok; genişlik:16px; yükseklik:16px; taşma:gizli; metin girintisi:-9999px; arkaplan:url(radioBg.png) merkez alt tekrarsız;) .sli -links .control-slide:hover( imleç:işaretçi; arka plan-konumu:merkez merkez;) .sli-links .control-slide.active( arka plan-konum:merkez üst;) #prewbutton, #nextbutton( /* Link " Sonraki" ve "Önceki" */ display:block; genişlik:15 piksel; yükseklik: %100; konum: mutlak; üst: 0; taşma: gizli; metin girintisi: -999 piksel; arka plan: url(okBg.png) sol orta tekrar yok; opaklık:0.8; z-endeksi:3; anahat:yok !important;) #prewbutton(left:10px;) #nextbutton( right:10px; background :url(arrowBg.png) sağ merkez tekrarsız;) #prewbutton:hover, #nextbutton:hover( opacity:1;)

Daha ayrıntılı olarak bir göz atalım. İlk olarak, "slider-wrap" kimliğine sahip ana bloğa istenen genişliği veriyoruz. Diğer tüm bloklar içine yerleştirildiği için yükseklik ayarlanamaz, içeride ne olacağına bağlı olacaktır. Daha sonra slaytları içerecek konteynerin boyutlarını ayarlamamız gerekiyor. Bu #kaydırıcı. Ona bir genişlik ve yükseklik verelim, ayrıca örneğin 10 piksellik bir kenarlık verelim. Burada genişlik 640 pikseldir, bu da ebeveynin genişliğinden daha azdır çünkü sağa ve sola 10 piksel genişliğinde kenarlıklar ekliyoruz. Bu div'in genişliği ayrıca slaytların genişliğini de belirler (.slide).

Son bir şey, içerideki slaytlar mutlak olarak konumlandırıldığından, slayt kabı için position:relative ayarını yaptığımızdan emin olmamız gerekir. Slaytların kendileri için yalnızca genişlik ve yükseklik CSS'de ayarlanır. Kalan özellikler zaten jQuery betiğinde ayarlanmıştır.

.sli-links seçici, gerekli slayta geçiş düğmeleri içeren bir bloktur. Bu düğmeler, formun basit öğeleridir. oda, ebeveyn.sli-bağlantıları ile birlikte gerekli numaraya otomatik olarak eklenecektir. Düğmeler için güzel bir görünüm belirliyoruz, yani her düğmeyi kare yapıyoruz, hepsini merkeze hizalıyoruz ve ayrıca overflow:hidden ve text-indent:-9999px sayesinde metni kaldırıyoruz, sadece arka plan simgeleri bırakıyoruz bu imleç öğesinin üzerine gelindiğinde de değişir. Kolaylık sağlamak için görüntü sayısını azaltan sprite kullandım.

Sonraki aktif düğmedir. Sadece arka planın konumunu değiştirin. Ardından, sonraki ve önceki slaytlara gitmek için bağlantıları yeniden düzenleyeceğiz. Onlara herhangi bir tasarım verebilirsiniz, tıpkı düğmeler gibi. Bu bağlantılar otomatik olarak #kaydırıcıya eklenir. Ancak onları görünür kılmak için, slaytların üzerinde görünmeleri için onlara mutlak bir konum ve bir üst katman (z-endeksi:3) verdim. CSS ile burada her şeyin açık ve basit olduğunu düşünüyorum: kaydırıcıyı istediğiniz şekilde biçimlendirmek için hemen hemen tüm özellikleri değiştirebilirsiniz.

Şimdi senaryonun kendisine bakalım:

hwSlideSpeed ​​= 700; var hwTimeOut = 3000; var hwNeedLinks = true; $(belge).ready(işlev(e) ( $(".slide").css(("konum" : "mutlak", "üst":"0", "sol": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = $("#slider .slide").size(); var animSlide = function(ok)( clearTimeout(slideTime); $ ("".slide").eq(slideNum).fadeOut(hwSlideSpeed); if(arrow == "next")( if(slideNum == (slideCount-1))(slideNum=0;) else(slideNum++) ) else if(arrow == "prew") ( if(slideNum == 0)(slideNum=slideCount-1;) else(slideNum-=1) ) else( slideNum = ok; ) $(".slide").eq ( slideNum).fadeIn(hwSlideSpeed, rotator); $(".control-slide.active").removeClass("active"); $(".control-slide").eq(slideNum).addClass("active" ) ; ) if(hwNeedLinks)( var $linkArrow = $("") .prependTo("#slider"); $("#nextbutton").click(function()( animSlide("next"); )) $ ( "#prewbutton").click(function()( animSlide("prew"); )) ) var $adderSpan = ""; $(".slide").each(function(index) ( $adderSpan += " " + dizin + ""; }); $("

").appendTo("#slider-wrap"); $(".control-slide:first").addClass("active"); $(".control-slide").click(function()( var goToNum = parseFloat($(this).text()); animSlide(goToNum); )); var duraklama = false; var rotator = function()( if(!pause)(slideTime = setTimeout(function()(animSlide(") next")), hwTimeOut);) ) $("#slider-wrap").hover(function()(clearTimeout(slideTime); duraklatma = true;), function()(duraklatma = yanlış; rotator(); ) ); döndürücü(); ));

İlk olarak, ayarlar değişkenlerde saklanır: hwSlideSpeed ​​​​ - slaytları döndürme hızı, hwTimeOut - slaytın otomatik olarak değiştirilmesinin gerçekleştiği süre, hwNeedLinks - "Sonraki" ve "Önceki" bağlantılarını kontrol eder - eğer bu değişkenin değeri true ise bu bağlantılar görüntülenecektir ve false ise buna göre olmayacaktır (blogumun ana sayfasında olduğu gibi).

Ardından, .css() yöntemini kullanarak slaytlar için gerekli CSS özelliklerini ayarlıyoruz. Mutlak konumlandırma kullanarak slayt bloklarını üst üste yığarız, ardından hepsini .hide() ile gizleriz ve ardından yalnızca ilkini gösteririz. SlideNum değişkeni, aktif slaydın numarasıdır, yani sayaç.

jQuery kaydırıcımızın nasıl çalıştığının arkasındaki ana mantık, animSlide işlevidir. Bir parametre alır. "Next" veya "prew" dizelerini ona geçirirsek, koşullu operatörler çalışacak ve sırasıyla sonraki veya önceki slayt görüntülenecektir. Değer olarak bir sayı gönderirsek, bu sayı aktif slayt olur ve gösterilir.

Yani bu fonksiyon mevcut div'i gizler, yenisini hesaplar ve gösterir.

Etkin slaydı görünür yapan .fadeIn() yönteminin ikinci bir argümanı olduğunu unutmayın. Bu, sözde geri arama işlevidir. Slayt tam olarak görüntülendiğinde yürütülür. Bu durumda, bu, slaytların otomatik olarak kaydırılmasını sağlamak için yapılır. Aşağıda tanımlanan döndürücü işlevi, ihtiyacımız olan zaman aralığında bir sonraki slayda ilerlemek için animSlide işlevini tekrar çağırır: sürekli kaydırma sağlayan bir kapatma elde ederiz.

Her şey yolunda gidiyor, ancak kullanıcı imleci kaydırıcının üzerine getirdiğinde veya düğmelere bastığında otomasyonun çalışmasını durdurmamız gerekiyor. Bunun için duraklama değişkeni oluşturulur. Değeri pozitif - true ise, otomatik geçiş olmayacaktır. .hover() yöntemiyle şunları belirtiyoruz: çalışıyorsa zamanlayıcıyı temizle - clearTimeout(slideTime) ve duraklatma = doğru olarak ayarlayın. İmleci geri çektikten sonra, duraklamayı devre dışı bırakın ve rotator() kapatmasını çalıştırın.

Ek olarak, sayfada yeni öğeler oluşturmamız ve bunları doğru yere yerleştirmemiz gerekiyor. Her slayt için her() döngüsünü kullanarak (.slide sınıfına sahip bir div), içinde bir sayı olacak bir yayılma öğesi oluşturacağız - slayt numarası. Bu sayı, animasyon işlevinde o sayı ile slayta atlamak için kullanılır. Her şeyi gerekli sınıflarla bir div'e saralım ve sonuç olarak aşağıdaki işaretlemeyi elde ederiz:

Görünüşe göre, neden HTML kodunda değil de komut dosyasının içinde işaretleme oluşturuyoruz? Gerçek şu ki, örneğin, bir kullanıcı komut dosyalarını devre dışı bırakmışsa, çalışmayan öğeleri görmeyecek ve bu onun kafasını karıştırmayacaktır. Ek olarak, kod basitleştirilmiştir, bu da SEO için iyidir.

Sonuç olarak, kaydırıcı düzeni şöyle görünecek (görüntüleri slayt olarak kullandım ve 5 tanesini ayarladım):

Aşağıda, jQuery kaydırıcımızın demo sayfasında nasıl çalıştığını görebilir ve gerekli tüm kaynakları indirebilirsiniz.

Son olarak, bu kaydırıcının Drupal ile entegrasyonu hakkında birkaç nokta. Bu kodu page.tpl.php gibi bir şablon dosyasına ekleyebilir ve betiği temaya ayrı js dosyaları olarak ekleyebilirsiniz. jquery, Drupal'da varsayılan olarak etkindir, ancak uyumluluk modunda () çalışır. İyileştirme için iki seçenek vardır. Veya tüm js kodunu sarın:

(fonksiyon ($) ( // Tüm kodunuz... ))(jQuery);

veya komut dosyasındaki $ sembollerini jQuery ile değiştirin. Bunun gibi:

jQuery(document).ready(function(e) ( jQuery(".slide").css(("position" : "mutlak", "üst":"0", "sol": "0")).hide ().eq(0).show(); var slideNum = 0; var slideTime; slideCount = jQuery("#slider .slide").size(); var animSlide = function(ok)( // vb .

Örnek zaten ilk yöntemi uygulamıştır.

Okuduğunuz için teşekkürler! Yorum bırakın yine gelin. Ayrıca, blog güncellemelerini ilk alan kişi olmak için RSS'ye abone olabilirsiniz!

Katma: Hepsi bu değil. Okumak. Orada bu betiğe yeni özellikler ekleyeceğiz.

1. Mükemmel jQuery slayt gösterisi

jQuery teknolojisini kullanan muhteşem muhteşem slayt gösterisi.

2. jQuery eklentisi "Scale Carousel"

jQuery kullanarak yakınlaştırılabilir slayt gösterisi. Size en uygun slayt gösterisinin boyutlarını ayarlayabilirsiniz.

3. jQuery eklentisi "slideJS"

Metin açıklamalı resim kaydırıcı.

4. "JSliderNews" Eklentisi

5. CSS3 jQuery Kaydırıcısı

Gezinme oklarının üzerine geldiğinizde, sonraki slaydın yuvarlak bir küçük resmi görüntülenir.

6. Pretty jQuery “Sunum Döngüsü” Kaydırıcısı

görüntü yükleme göstergeli jQuery kaydırıcısı. Otomatik slayt değişimi sağlanır.

7. jQuery Paralaks Kaydırıcı Eklentisi

3D arka plan efektli kaydırıcı. Bu kaydırıcının öne çıkan özelliği, her biri farklı bir hızda kayan birkaç katmandan oluşan arka planın hareketidir. Sonuç, hacimsel bir etkinin taklididir. Çok güzel görünüyor, kendiniz görebilirsiniz. Efekt, Opera, Google Chrome, IE gibi tarayıcılarda daha sorunsuz görüntülenir.

8. Taze, hafif jQuery kaydırıcısı "bxSlider 3.0"

Demo sayfasındaki "örnekler" bölümünde, bu eklentinin tüm olası kullanımlarına bağlantılar bulabilirsiniz.

9. jQuery Image Slider Eklentisi "slideJS"

Şık jQuery kaydırıcısı kesinlikle projenizi dekore edebilecek.

10. jQuery slayt gösterisi eklentisi "Kolay Slaytlar" v1.1

Kullanımı kolay bir jQuery slayt gösterisi eklentisi.

11. "jQuery Slides" Eklentisi

Çeşitli tasarımlarda hafif jQuery eklentisi. Otomatik slayt değişimi sağlanır.

12. Otomatik slayt geçişli jQuery CSS galerisi

Ziyaretçi belirli bir süre içinde ileri veya geri oklarına tıklamazsa galeri otomatik olarak gezinmeye başlayacaktır.

13. jQuery Nivo Kaydırıcısı

Geçerli kod ile çok profesyonel kalitede hafif eklenti. Birçok farklı slayt geçiş efekti vardır.

14. jQuery Mobil Kaydırıcı

Taze kaydırıcı. Farklı görüntü geçiş efektlerine sahip jQuery kaydırıcısı.

15. jQuery Slider² Eklentisi

Otomatik slayt değiştirme özelliğine sahip hafif kaydırıcı.

16. Taze javascript kaydırıcısı

Otomatik görüntü değiştirme özelliğine sahip kaydırıcı.

Otomatik slayt değişikliği ile slayt gösterisi uygulaması için eklenti. Görüntü küçük resimlerini kullanarak ekranı kontrol etmek mümkündür.

NivoSlider eklentisini kullanan jQuery CSS görüntü kaydırıcısı.

19. jQuery "jShowOff" Kaydırıcısı

İçerik döndürme eklentisi. Üç kullanım seçeneği: gezinme yok (slayt gösterisi biçiminde otomatik değişiklik ile), düğmeyle gezinme, küçük resim gezinmesi ile.

20. Shutter Effect Portföy Eklentisi

Fotoğrafçının portföy tasarımı için yeni jQuery eklentisi. Galeri, görüntüleri değiştirmenin ilginç bir etkisine sahiptir. Fotoğraflar, bir lens deklanşörünün çalışmasına benzer bir efektle birbirini takip eder.

21. Hafif javascript CSS kaydırıcısı "TinySlider 2"

Javascript ve CSS kullanarak görüntü kaydırıcı uygulaması.

22. Harika kaydırıcı "Tinycircleslider"

Şık yuvarlak kaydırıcı. Görüntüler arasındaki geçiş, kaydırıcıyı kırmızı bir daire şeklinde çevresi etrafında sürükleyerek gerçekleştirilir. Tasarımınızda yuvarlak elemanlar kullanırsanız sitenize mükemmel uyum sağlar.

23. jQuery görüntü kaydırıcısı

Hafif Kaydırıcı Kiti. Kaydırıcı farklı versiyonlarda sunulur: dikey ve yatay. Görüntüler arasında çeşitli gezinme türleri de uygulanmaktadır: "İleri" ve "Geri" düğmelerinin kullanılması, fare tekerleğinin kullanılması, farenin slaytta tıklamasının kullanılması.

24. Slider Kit Küçük Resim Galerisi

Kaydırıcı Kiti Galerisi. Küçük resimler hem dikey hem de yatay olarak kaydırılır. Görüntüler arasındaki geçiş şu şekilde gerçekleştirilir: fare tekerleği, fare tıklaması veya bir küçük resmin üzerine gelme.

25. jQuery İçerik Kaydırıcısı “Slider Kit”

jQuery dikey ve yatay içerik kaydırıcısı.

26. jQuery Slider Kit Slayt Gösterisi

Otomatik slayt değiştirme ile slayt gösterisi.

27. Hafif profesyonel javascript CSS3 kaydırıcısı

2011'de oluşturulan düzgün jQuery ve CSS3 kaydırıcısı.

jQuery küçük resim slayt gösterisi.

29. Basit jQuery slayt gösterisi

Gezinme düğmeleri ile slayt gösterisi.

30. Harika jQuery Skitter Slayt Gösterisi

Harika slayt gösterileri oluşturmak için jQuery "Skitter" eklentisi. Eklenti, görüntüleri değiştirirken 22 (!) türde farklı animasyon efektini destekler. İki slayt gezinme seçeneğiyle çalışabilir: slayt numaralarını kullanma ve küçük resimleri kullanma. Demoyu kontrol ettiğinizden emin olun, çok kaliteli bir keşif. Kullanılan teknolojiler: CSS, HTML, jQuery, PHP.

31. Garip Slayt Gösterisi

İşlevsel slayt gösterisi. Slaytlar şunlar olabilir: basit resimler, altyazılı resimler, araç ipuçları içeren resimler, video klipler. Gezinmek için klavyenizdeki okları, slayt numarası bağlantılarını ve sağ/sol tuşlarını kullanabilirsiniz. Slayt gösterisi birkaç versiyonda yapılır: küçük resimlerle ve onlarsız. Tüm seçenekleri görüntülemek için, demo sayfasının üst kısmında bulunan Demo #1 - Demo #6 bağlantılarını izleyin.

Bir hayranı andıran görüntü kaydırıcısının çok özgün bir tasarımı. Animasyonlu slayt geçişi. Görüntüler arasında gezinme oklar kullanılarak gerçekleştirilir. Ayrıca üstte bulunan Oynat / Duraklat düğmesi kullanılarak açılıp kapatılabilen otomatik bir değişiklik de vardır.

Hareketli jQuery kaydırıcısı. Tarayıcı penceresi yeniden boyutlandırıldığında arka plan resimleri otomatik olarak ölçeklenir. Her görüntü için açıklama içeren bir blok açılır.

34. jQuery ve CSS3'te "Flux Slider" kaydırıcısı

Yeni jQuery kaydırıcısı. Slaytları değiştirirken birkaç harika animasyon efekti.

35. jQuery eklentisi "jSwitch"

Hareketli jQuery galerisi.

Otomatik slayt değiştirme ile kolay jQuery slayt gösterisi.

37. "SlideDeck 1.2.2" eklentisinin yeni versiyonu

Profesyonel içerik kaydırıcısı. Otomatik slayt değiştirme seçeneklerinin yanı sıra slaytlar arasında hareket etmek için fare tekerleğini kullanma seçeneği vardır.

38. jQuery Sudo Kaydırıcısı

Hafif jQuery görüntü kaydırıcısı. Uygulama için birçok seçenek vardır: görüntülerin yatay ve dikey değişimi, slayt numarasına bağlantılar içeren ve bunlar olmadan, resim altyazılı ve resimsiz, çeşitli resim değiştirme efektleri. Otomatik slayt değiştirme özelliği vardır. Tüm uygulama örneklerine bağlantılar demo sayfasında bulunabilir.

39. jQuery CSS3 Slayt Gösterisi

Küçük resimler içeren slayt gösterisi, otomatik slayt geçiş modunu destekler.

40. jQuery Akı Kaydırıcısı

Birçok görüntü değiştirme efektine sahip kaydırıcı.

41. Basit jQuery kaydırıcısı

Şık jQuery görüntü kaydırıcısı.

42. "Craftyslide" jQuery slayt gösterisi

43. Tam Ekran jQuery Slayt Gösterisi

jQuery HTML5 tam ekran sesli slayt gösterisi.

Basit bir jQuery slayt gösterisi.