Menü
Bedava
kayıt
ev  /  programlar/ Jquery önizlemeli basit kaydırıcı. İleri ve geri düğmeleri olan basit kaydırıcı

Jquery önizlemeli basit kaydırıcı. İleri ve geri kontrol düğmelerine sahip basit kaydırıcı

Başlangıç ​​olarak, bu makale size web sayfaları için bir resim kaydırma kaydırıcısının nasıl oluşturulacağını anlatmak amacıyla yazılmıştır. Bu makale hiçbir şekilde doğada bir öğretim değildir, yalnızca değerlendirme nesnemizi nasıl uygulayabileceğinizin bir örneği olarak hizmet eder. Bu yazıda verilen kodu bu tür gelişmeler için bir tür şablon olarak kullanabilirsiniz, umarım yazdıklarımın tüm özünü okuyucuya yeterince ayrıntılı ve erişilebilir bir şekilde aktarabilirim.



Ve şimdi konuya gelince, çok uzun zaman önce bir siteye bir kaydırıcı koymam gerekiyordu, ancak internette hazır komut dosyaları aradıktan sonra değerli bir şey bulamadım. bazıları ihtiyacım olduğu gibi çalışmadı, bazıları ise konsolda hatasız başlamadı. Kullanmak jQuery - eklentiler kaydırıcı için bana çok ilginç geldi, tk. Bununla sorunu çözecek olsam da, bu mekanizmanın çalışması hakkında bir anlayışa sahip olmayacağım ve eklentiyi bir kaydırıcı uğruna kullanmak çok uygun değil. Ayrıca çarpık komut dosyalarını da gerçekten anlamak istemedim, bu yüzden kaydırıcı için kendi komut dosyamı yazmaya karar verdim, ihtiyacım olduğunda kendim işaretleyeceğim.


İlk olarak, kaydırıcının mantığına karar vermeli ve ardından uygulamaya geçmeliyiz, bu aşamada bu mekanizmanın işleyişini net bir şekilde anlamak çok önemlidir, çünkü onsuz kodu yazamayız. tam istediğimiz gibi çalışıyor.


asıl amacımız şu olacak görüş alanı, yani, resimlerimizin nasıl döndüğünü göreceğimiz bir blok, içinde kaydırıcı, bu, tüm görüntüleri içeren, tek bir satırda dizilmiş ve en içindeki konumunu değiştirecek olan bloğumuz olacaktır. görüş alanı.


Ayrıca, iç taraflarda görüş alanı, dikey olarak ortada, geri ve ileri düğmeleri yer alacak, üzerine tıkladığımızda da konumumuzu değiştireceğiz. kaydırıcı Nispeten görüş alanı, böylece resimler arasında kaydırma etkisine neden olur. Ve son olarak, son nesne, altta bulunan gezinme butonlarımız olacaktır. görüş alanı.


Üzerlerine tıkladığımızda bu butonun seri numarasına bakıp yine kaydırma yaparak ihtiyacımız olan slayda geçeceğiz. kaydırıcı(ofset bir değişiklik yoluyla yapılacaktır css özelliklerini dönüştür, değeri sürekli olarak hesaplanacaktır).


Yukarıda anlattıklarımın ardından bu olayın mantığının netleşmesi gerektiğini düşünüyorum ama yine de bir yerlerde yanlış anlaşılmalar varsa, o zaman aşağıdaki kodda her şey açıklığa kavuşacaktır, biraz sabretmeniz yeterli.


Şimdi yazalım! Öncelikle sitemizi açacağız. dizin dosyası ve ihtiyacımız olan işaretlemeyi oraya ekleyin:



Gördüğünüz gibi, karmaşık bir şey yok kaydırıcı için blok kaydırıcımızın yerleştirileceği aynı blok olarak hizmet eder, kendi içinde görüş alanı hangi bizim kaydırıcı, aka iç içe liste, burada li slaytlar ve resim- içlerindeki resimler. Lütfen tüm resimlerin aynı boyutta veya en azından oranlarda olması gerektiğine dikkat edin, aksi takdirde kaydırıcı çarpık görünecektir, tk. boyutları doğrudan görüntünün en boy oranına bağlıdır.


Şimdi her şeyi stilize etmemiz gerekiyor, genellikle stiller hakkında gerçekten yorum yapılmaz, ancak ilerde yanlış anlaşılma olmasın diye buna dikkat çekmeye karar verdim.


gövde (kenar boşluğu: 0; dolgu: 0;) # kaydırıcı bloğu (genişlik: 800 piksel; kenar boşluğu: 0 otomatik; kenar boşluğu: 100 piksel;) #görünüm noktası (genişlik: %100; görüntü: tablo; konum: göreli; taşma: gizli; -webkit-kullanıcı-seçimi: yok; -moz-kullanıcı-seçimi: yok; -ms-kullanıcı-seçimi: yok; -o-kullanıcı-seçimi: yok; kullanıcı-seçimi: yok;) #slidewrapper ( konum: göreli; genişlik: hesap (%100 * 4); üst: 0; sol: 0; kenar boşluğu: 0; dolgu: 0; -webkit-geçişi: 1s; -o-geçişi: 1s; geçiş: 1s; -webkit -geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; -o-geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı;) #slidewrapper ul, #slidewrapper li (marj : 0; dolgu: 0;) #slidewrapper li (genişlik: calc (%100 / 4); liste stili: yok; görüntü: satır içi; kayan nokta: sol;) .slide-img (genişlik: %100;)

İle başlayalım kaydırıcı için blok, tekrar ediyorum, bu, kaydırıcı için ayıracağımız sayfadaki bloğumuz, yüksekliği genişliğine ve resmimizin oranlarına bağlı olacaktır, çünkü görüş alanı tüm genişliği kaplar kaydırıcı için blok sonra kendim kaymak aynı genişliğe sahiptir ve buna göre içindeki resim, genişliğe bağlı olarak yüksekliğini değiştirir (oranlar korunur). Bu öğeyi sayfamın ortasına yatay olarak yerleştirdim, üstten 100 piksel doldurdum, konumunu bir örnek için daha uygun hale getirdim.


eleman görüş alanı, daha önce de belirtildiği gibi, tüm genişliğimizi kaplar kaydırıcı için blok, özelliği var taşma: gizli, görünümün dışındaki görüntü beslememizi gizlememize izin verecek.


Takip etme css özelliği - kullanıcı seçimi: yok, mavi seçimden kurtulmanızı sağlar bireysel elemanlar birden fazla düğme tıklaması ile kaydırıcı.


devam etmek kaydırıcı Niye pozisyon: göreceli, Ama değil mutlak? Her şey çok basit, tk. ikinci seçeneği seçersek, o zaman özellik ile görüntü alanı taşması: gizli kesinlikle hiçbir şey bize görünmeyecek, tk. kendim görüş alanı yüksekliğe ayarlanmayacak kaydırıcı, sahip olacağından dolayı yükseklik: 0... Genişlik neden bu kadar önemli ve neden ayarlıyoruz? Mesele şu ki, slaytlarımız eşit bir genişliğe sahip olacak Görünüm alanının %100'ü, ve onları bir sıraya dizmek için duracakları bir yere ihtiyacımız var, dolayısıyla genişlik kaydırıcı eşit olmalı %100 görüntü alanı genişliği slayt sayısıyla çarpılır (benim durumumda 4). İlişkin geçiş ve geçiş-zamanlama-fonksiyonu sonra burada 1s pozisyon değişikliği anlamına gelir kaydırıcı 1 saniye içinde gerçekleşecek ve bunu gözlemleyeceğiz ve giriş-çıkış kolaylığı- ilk başta yavaş gittiği, ortaya hızlandığı ve sonra tekrar yavaşladığı animasyon türü, burada değerleri zaten kendi takdirinize göre ayarlayabilirsiniz.


Bir sonraki özellik kümeleri bloğu kaydırıcı ve çocukları sıfır dolguya sahiptir, burada yorum gereksizdir.


Ardından, slaytlarımızı şekillendireceğiz, genişlikleri genişliğe eşit olmalıdır. görüş alanı, ama o zamandan beri içerdeler kaydırıcı genişliği, slayt sayısıyla çarpılan görünüm alanının genişliğine eşittir, ardından genişliği elde etmek için görüş alanı yine, genişliğin %100'üne ihtiyacımız var kaydırıcı slayt sayısına bölün (benim durumumda yine 4'e). Sonra bunları kullanarak satır içi öğelere dönüştürüyoruz. ekran: satır içi ve özelliği ekleyerek akışı sola ayarlayın yüzer: sol... Hakkında liste stili: yok Varsayılan işaretçiyi kaldırmak için kullandığımı söyleyebilirim. li, çoğu durumda bir tür standarttır.


İle birlikte slayt-img her şey basit, resim tüm genişliği kaplayacak kaymak, kaymak yüksekliğine göre ayarlanır, kaydırıcı yüksekliğe göre ayarlanır kaymak ve yükseklik görüş alanı sırayla yükseklik değerini alacak kaydırıcı, bu nedenle kaydırıcımızın yüksekliği, görüntünün oranlarına ve yukarıda zaten yazdığım kaydırıcı için sağlanan bloğun boyutuna bağlı olacaktır.


Sanırım stilleri burada bulduk, şimdilik butonsuz basit bir slayt gösterisi yapalım ve düzgün çalıştığından emin olduktan sonra bunları ekleyip stillendirelim.


hadi bizimkileri aç js dosyası kaydırıcı kodunu içerecek, eklemeyi unutmayın jQuery dan beri bu çerçeveyi kullanarak yazacağız. Bu arada, bu yazıyı yazarken sürümü kullanıyorum. jQuery 3.1.0... Komut dosyasının kendisi etiketin en sonuna eklenmelidir. vücut dan beri önce başlatılması gereken DOM öğeleriyle çalışacağız.


Şimdilik, birkaç değişken tanımlamamız gerekiyor, biri zaman içinde belirli bir noktada gördüğümüz slayt numarasını saklayacaktır. görüş alanı, ona isim verdim şimdi slayt, ve ikincisi aynı slaytların sayısını depolayacaktır, bu slaytCount.


var slideNow = 1; var slideCount = $ ("# slidewrapper").child().length);

Değişken şimdi slayt başlangıç ​​değerini 1 ayarlamak gereklidir, çünkü sayfa yüklendiğinde, işaretlememize dayanarak ilk slaydı göreceğiz görüş alanı.


V slaytCountçocuk sayısını koyacağız kaydırıcı, burada her şey mantıklı.
Ardından, slaytları sağdan sola değiştirmekten sorumlu olacak bir işlev oluşturmanız gerekiyor, bunu ilan edeceğiz:


işlev nextSlide () ()

Onu kodumuzun ana bloğunda arayacağız, buna ulaşacağız, ancak şimdilik fonksiyonumuza ne yapması gerektiğini söyleyeceğiz:


nextSlide () işlevi (if (slideNow == slideCount || slideNow)<= 0 || slideNow >slideCount) ($ ("# slidewrapper").css ("dönüştür", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0) ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Başlangıç ​​olarak, şimdi feed'imizin son slaydında olup olmadığımızı kontrol ediyoruz. Bunu yapmak için, kullanarak tüm slaytlarımızın sayısını alıyoruz. $ ("# slayt sarmalayıcı").çocuklar().uzunluk ve slaytımızın numarasıyla kontrol edin, eğer eşitlerse, bu, 1 slayttan şeridi tekrar göstermeye başlamamız gerektiği anlamına gelir, bu, değiştirdiğimiz anlamına gelir. css dönüştürme özelliği NS kaydırıcıüzerinde çevir (0, 0), böylece ilk slaytın görüş alanımızda görünmesi için orijinal konumuna kaydırarak, şunu da unutmayın. –Webkit ve –ms yeterli çapraz tarayıcı gösterimi için (bkz. css özellikleri referansı). Bundan sonra değişkenin değerini güncellemeyi unutmayalım. şimdi slayt, 1 numaralı slaydın görüş alanında olduğunu ona bildirerek: slaytŞimdi = 1;


Aynı koşul, gördüğümüz slayt numarasının slaytlarımızın sayısı içinde olup olmadığını kontrol etmeyi içerir, ancak bir şekilde bu sağlanmazsa, 1. slayta döneriz.


İlk koşul karşılanmıyorsa, bu durumda olduğumuzu gösterir. şu an son slaytta ya da var olmayan bir slaytta değiliz, yani bir sonrakine geçmemiz gerekiyor, bunu kaydırarak yapacağız kaydırıcı genişliğe eşit bir değerle sola görüş alanı, yer değiştirme yine tanıdık özellik aracılığıyla gerçekleşecektir. Çevirmek kimin değeri eşit olacak "translate (" + translateWidth + "px, 0)", nerede tercüme Genişliği- bizim mesafemiz kaydırıcı... Bu arada, kodumuzun başında bu değişkeni bildirelim:


var translateWidth = 0;

Bir sonraki slayda geçtikten sonra, slaytımıza bir sonraki slaydı gördüğümüzü söyleyin: slaytŞimdi ++;


Şu anda bazı okuyucuların bir sorusu olabilir: neden değiştirmedik? $ ("# görünüm alanı"). genişlik () bazı değişkenlere, örneğin slayt Genişliği slaytımızın genişliğini her zaman elinizin altında bulundurmak için? Cevap çok basit, eğer sitemiz duyarlıysa, buna göre, kaydırıcı için ayrılan blok da uyarlanabilir, bundan, sayfayı yeniden yüklemeden pencere genişliğinin boyutunu değiştirirken (örneğin, döndürme) anlaşılabilir. telefon yana doğru), genişlik görüş alanı değişecek ve buna göre bir slaydın genişliği de değişecektir. Bu durumda, bizim kaydırıcı orijinal genişlik değeri ile kaydırılacaktır, bu da resimlerin parçalar halinde görüntüleneceği veya hiç görüntülenmeyeceği anlamına gelir. görüş alanı... Fonksiyonumuza yazarak $ ("# görünüm alanı"). genişlik () onun yerine slayt Genişliği slaytları her değiştirdiğimizde genişliği hesaplamasını sağlıyoruz görüş alanı, böylece ekran genişliği aniden değiştiğinde istenen slayda bir kaydırma sağlar.


Ancak fonksiyonu yazdık, şimdi belirli bir zaman aralığından sonra çağırmak gerekiyor, aralığı bir değişkende de saklayabiliriz, böylece istenirse değiştirebiliriz, kodda sadece bir değeri değiştirin:


var slideInterval = 2000;

Js cinsinden süre milisaniye cinsinden belirtilir.


Şimdi aşağıdaki yapıyı yazalım:


$ (belge) .ready (işlev () (setInterval (nextSlide, slideInterval);));

Her şey daha kolay değil, inşaatın içerisindeyiz $ (belge) .ready (işlev () ()) belge tamamen yüklendikten sonra aşağıdaki işlemlerin yapılması gerektiğini söylüyoruz. O zaman sadece işlevi çağırırız sonraki slayt eşit bir aralık ile slaytAralık, yerleşik işlevi kullanarak setAralık.


Yukarıda gerçekleştirdiğimiz tüm işlemlerden sonra kaydırıcımız iyi dönmeli, ancak bir şeyler ters gittiyse, sorun sürümde olabilir. jQuery, ya içinde yanlış bağlantı herhangi bir dosya. Ayrıca, kodda bir yerde hata yapmış olabileceğinizi dışlamanıza gerek yok, bu yüzden size sadece her şeyi iki kez kontrol etmenizi tavsiye edebilirim.


Bu arada, devam edin, kaydırıcımıza vurgulu kaydırmayı durdurma gibi bir işlev ekleyin, bunun için ana kod bloğuna yazmamız gerekiyor ($ (belge) içinde .ready (işlev () ())) Böyle bir şey:


$ ("# viewport").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nextSlide, slideInterval);));

Bu kodu analiz etmeye başlamak için, ne olduğunu bilmemiz gerekiyor. anahtarAralık... İlk olarak, nextSlide işlevine yapılan periyodik bir çağrıyı saklayan bir değişkendir, basitçe söylemek gerekirse, bu kod satırını kullanıyoruz: setInterval (sonrakiSlide, slideInterval);, şuna dönüştü: switchInterval = setInterval (nextSlide, slideInterval);... Bu manipülasyonlardan sonra ana kod bloğumuz aşağıdaki formu aldı:


$ (belge) .ready (function () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Burada olay kullanıyorum üzerine gelmek"vurgulu" anlamına gelen bu olay, bir nesnenin üzerine geldiğim anı izlememe izin veriyor, bu durumda görüş alanı.


Gezindikten sonra, parantez içinde belirteceğim boşlukları temizliyorum (bu bizim anahtarAralık), sonra virgülle ayırarak imleci geri hareket ettirdiğimde ne yapacağımı yazarım, bu blokta tekrar anahtarAralık periyodik fonksiyon çağrısı sonraki slayt.


Şimdi, kontrol edersek, kaydırıcımızın fareyle üzerine gelindiğinde nasıl tepki verdiğini ve slayt geçişini durdurduğunu göreceğiz.


Şimdi kaydırıcımıza butonları eklemenin zamanı geldi, ileri geri butonlarla başlayalım.


Her şeyden önce, onları işaretleyelim:



İlk başta, bu işaretleme anlaşılmayabilir, hemen söyleyeceğim, bu iki düğmeyi bir araya getirdim. div sınıf ile önceki-sonraki-btns sadece rahatınız için, bunu yapmanıza gerek yok, sonuç değişmeyecek, şimdi onlara stiller ekleyeceğiz ve her şey netleşecek:


# önceki-btn, # sonraki-btn (konum: mutlak; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: #fff; kenarlık yarıçapı: %50; üst: hesap (%50 - 25 piksel);) # önceki- btn: vurgulu, # sonraki-btn: vurgulu (imleç: işaretçi;) # önceki-btn (sol: 20px;) # sonraki-btn (sağ: 20px;)

İlk olarak butonlarımızı konumlandırıyoruz. pozisyon: mutlak, böylece kendi içimizde konumlarını özgürce kontrol edeceğiz. görüş alanı, sonra bu düğmelerin boyutlarını belirteceğiz ve sınır yarıçapı köşeleri yuvarlayın, böylece bu düğmeler daireye dönüşür. Renkleri beyaz olacak, yani #fff ve üst kenardan girintileri görüş alanı bunun yüksekliğinin yarısına eşit olacak görüş alanı düğmenin yüksekliğinin yarısı (benim durumumda 25 piksel), böylece onları ortada dikey olarak konumlandırabiliriz. Ardından, üzerlerine geldiğimizde imlecimizin olarak değişeceğini belirteceğiz. Işaretçi ve son olarak, düğmelerimize tek tek kenarlarından 20 piksel girinti yapmalarını söyleyin, böylece onları uygun gördüğümüz şekilde görebiliriz.


Yine sayfa öğelerini istediğiniz gibi şekillendirebilirsiniz, sadece kullanmaya karar verdiğim stillerden bir örnek veriyorum.


Şekillendirmeden sonra kaydırıcımız şöyle görünmelidir:


Ardından, bize geri dönün js dosyası düğmelerimizin nasıl çalıştığını açıkladığımız yer. Peki, başka bir fonksiyon ekleyelim, bize bir önceki slaydı gösterecek:


işlev prevSlide () (if (slideNow == 1 || slideNow)<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0) ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px) , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); şimdi slayt--;))

denir prevSlide, sadece üzerine tıkladığınızda çağrılacak önceki btn... İlk önce 1. slaytta olup olmadığımızı kontrol ediyoruz, burada da bizim slaytta olup olmadığımızı kontrol ediyoruz. şimdi slayt slaytlarımızın gerçek aralığının sınırlarının ötesinde ve koşullardan herhangi biri işe yararsa, kaydırarak son slayta geçeceğiz. kaydırıcı ihtiyacımız olan değere. Bu değeri şu formülle hesaplayacağız: (bir slaydın genişliği) * (slayt sayısı - 1), tüm bunları eksi işaretiyle alıyoruz, çünkü sola kaydırıyoruz, ortaya çıkıyor görüş alanışimdi bize son slaydı gösterecek. Bu bloğun sonunda değişkeni de söylememiz gerekiyor. şimdi slayt son slayt artık görüş alanımızda.


İlk slaytta değilsek, 1 geriye gitmemiz gerekiyor, bunun için tekrar özelliği değiştiriyoruz. kaydırıcı için dönüştürme... Formül şu şekildedir: (bir slaydın genişliği) * (geçerli slaydın sayısı - 2), yine tüm bunları eksi işaretiyle alıyoruz. Ama neden -1 değil de -2, tam olarak 1 slaydı geri almamız gerekiyor? Gerçek şu ki, eğer 2. slayttaysak, o zaman değişken xözellikler dönüştürmek: çevir (x, 0) bizim kaydırıcı zaten bir slaydın genişliğine eşit, ona mevcut slaydın sayısından 1 çıkarmamız gerektiğini söylersek, zaten kaydırıldığı birimi tekrar alırız kaydırıcı, bu yüzden bu genişlikleri 0 ile kaydırmanız gerekecek görüş alanı, yani slaytta - 2.



Şimdi sadece bu satırları ana kod bloğuna eklememiz gerekiyor:


$ ("# next-btn").tıklayın (işlev () (nextSlide ();)); $ ("# prev-btn").tıklayın (function () (prevSlide ();));

Burada sadece butonlarımıza bir tıklama yapılıp yapılmadığını takip ediyoruz ve bu durumda ihtiyacımız olan fonksiyonları çağırıyoruz, her şey basit ve mantıklı.


Şimdi kaydırmalı gezinme düğmelerini, işaretlemeye geri ekleyelim:



Görüldüğü gibi içeride görüş alanı iç içe bir liste belirdi, ona bir tanımlayıcı verin nav-btns, içinde li- gezinme butonlarımız, onlara bir sınıf atayacağız slayt-nav-btn, ancak, işaretlemeyi bitirebiliriz, hadi stillere inelim:


# nav-btns (konum: mutlak; genişlik: %100; alt: 20 piksel; dolgu: 0; kenar boşluğu: 0; metin hizalama: merkez;) .slide-nav-btn (konum: göreli; görüntü: satır içi blok; liste stili: yok; genişlik: 20 piksel; yükseklik: 20 piksel; arka plan rengi: #fff; sınır yarıçapı: %50; kenar boşluğu: 3 piksel;) .slide-nav-btn: vurgulu (imleç: işaretçi;)

blok nav-btns, butonlarımızın bulunduğu özelliği veriyoruz pozisyon: mutlak uzamasın diye görüş alanı yüksekliğinde, çünkü NS kaydırıcı Emlak pozisyon: göreceli, genişliği %100 olarak ayarladık, böylece metin hizalama: orta orta düğmeler yatay olarak göreli görüş alanı, ardından özelliği kullanarak alt alt kenardan 20 piksel uzaklıkta olması gerektiğini bloğumuza açıkça belirtiyoruz.


Aynısını slaytlarda olduğu gibi düğmelerle yapıyoruz, ancak şimdi onları ayarlıyoruz ekran: satır içi blok dan beri NS ekran: satır içi tepki vermiyorlar Genişlik ve boy uzunluğu dan beri kesinlikle konumlandırılmış bir blokta. Renklerini beyaz yapacağız ve zaten bize tanıdık gelenlerin yardımıyla sınır yarıçapı onlara bir daire şekli verin. Üzerlerine geldiğinizde, normal ekran için imlecimizin görünümünü değiştireceğiz.


şimdi aşağı inelim jQuery - parçalar:
İlk olarak, tıkladığımız butonun indeksini saklayacak olan navBtnId değişkenini bildirelim:


var navBtnId = 0;
$ (". slide-nav-btn"). (fonksiyon () (navBtnId = $ (bu) .index (); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# görünüm alanı") öğesini tıklayın. genişlik () * (navBtnId); $ ("# slayt sarmalayıcı").css (("dönüştür": "çevir (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Buraya tıkladığımızda buradayız slayt-nav-btnöncelikle değişkene atayan işlevi çağırırız navBtnId tıklanan düğmenin dizini, yani sıra numarası, sayım sıfırdan başladığından, ikinci düğmeye tıklarsak, o zaman navBtnId değer 1 yazılır. Ardından, geri sayım 0'dan değil de 1'den gibi bir sayı elde etmek için düğmenin seri numarasına bir tane eklediğimiz bir kontrol yaparız, bu sayıyı sayı ile karşılaştırırız. geçerli slayt, çakışırlarsa, herhangi bir işlem yapmayacağız, çünkü istenen slayt zaten görüş alanı.


İhtiyacımız olan slayt gözden uzaksa görüş alanı, sonra kaydırmamız gereken mesafeyi hesaplıyoruz kaydırıcı sola, ardından değeri değiştirin çeviride css dönüştürme özellikleri(piksel olarak aynı mesafe, 0). Bunu zaten bir kereden fazla yaptık, bu yüzden soru olmamalı. Sonunda mevcut slaydın değerini tekrar bir değişkene kaydediyoruz. şimdi slayt, bu değer tıklanan düğmenin dizinine bir tane eklenerek hesaplanabilir.


Hepsi bu, aslında, eğer bir şey net değilse, o zaman malzemede yazılan tüm kodun sağlanacağı jsfiddle'a bir link bırakıyorum.




Dikkatiniz için teşekkürler!

Etiketler:

  • jquery kaydırıcısı
  • css
  • css3 animasyonu
  • html
Etiket ekle

Herhangi bir bağımlılık olmadan saf Javascript ile yazılmış basit, hafif (21Kb sıkıştırılmış) bir kaydırıcı, yani. jQuery olmadan çalışır.

Aşağıdaki tarayıcılarda test edilmiştir:

  • krom 26.0
  • Firefox 20.0
  • Safari 5.1.7
  • IE 10
  • Opera 16.0

IE8 / 9 için eksik destek var (etki yok).

özellikler

  • Sayfaya sınırsız sayıda kaydırıcı ekleyebilir, hatta birini diğerinin içine yerleştirebilirsiniz.
  • İçeriğe göre yeniden boyutlandırılır, ancak devre dışı bırakılabilir.
  • Klavyede Gezinme - İmleç kaydırıcı üzerindeyken ok kaydırıcılarını değiştirebilirsiniz.
  • Mobil dokunma olayları için destek.

Bağlantı

Kapanış etiketinden önce bağlanmak gerek slidr.js veya slidr.min.js dosya.

HTML işaretlemesi

slidr.js id özniteliğine sahip herhangi bir satır içi, satır içi blok, blok öğeleriyle çalışabilir. data-slidr özniteliği ile herhangi bir birinci seviye alt öğenin kullanılmasına izin verilir, örneğin:

  • elma
  • muz
  • Hindistan cevizi
elma
muz
Hindistan cevizi

Javascript

bağlandıktan sonra slidr.js global slider nesnesi kullanılabilir hale gelecektir. Slider oluşturmanın en kolay yolu şudur:

Slidr.create ("slidr-id") Başlat ();

Belirtilen tüm ayarlarla arayın:

Slidr.create ("slidr-id", (sonra: function (e) (console.log ("in:" + e.in.slidr);), önce: function (e) (console.log ("out: "+ e.out.slidr);), içerik kırıntıları: doğru, kontroller:" köşe ", yön:" dikey ", solma: yanlış, klavye: doğru, taşma: doğru, tema:" # 222 ", zamanlama: (" küp ":" 0,5s kolaylık "), dokunma: doğru, geçiş:" küp "))). start ();

Ayarlar

slidr.js için mevcut tüm ayarlar aşağıdaki tabloda gösterilmektedir.

Parametre Bir çeşit Varsayılan Açıklama
sonrasında işlev slayt değişikliğinden sonra geri arama işlevi
önce işlev slayt değişikliğinden önce geri arama işlevi
galeta unu bool YANLIŞ Slayt kontrolü için kırıntıları göster. doğru ya da yanlış.
kontroller sicim sınır Slaytları kontrol etmek için okların düzenlenmesi. kenarlık, köşe veya hiçbiri.
yön sicim yatay Yeni slaytlar için varsayılan yön. yatay veya h, dikey veya v.
solmak bool NS Fade-in / out efektini etkinleştirin. doğru ya da yanlış.
tuş takımı bool YANLIŞ Klavyeyi kullanarak slayt değiştirmeyi etkinleştirin. doğru ya da yanlış.
taşma bool YANLIŞ Kaydırıcı bloğu için taşmayı etkinleştirin. doğru ya da yanlış.
Duraklat bool YANLIŞ Fareyle üzerine gelindiğinde slaytları otomatik olarak değiştirmeyin (otomatik () çalıştırmanız gerekir). doğru ya da yanlış.
tema sicim #fff Kaydırıcı denetimlerinin rengi (kırıntılar ve oklar). #hexcode veya rgba (değer).
zamanlama nesne {} Uygulanacak özel animasyon zamanlamaları. ("geçiş": "zamanlama").
dokunma bool YANLIŞ Mobil cihazlarda dokunmatik kontrolü etkinleştirin. doğru ya da yanlış.
geçiş sicim doğrusal Slayt değiştirmenin etkisi. küp, doğrusal, solma veya hiçbiri.

Geri arama sonrası ve öncesi işlevleri aşağıdaki verileri alır:

(id: "slidr-id", içinde: (el: # , slidr: "data-slidr-in", trans: "geçiş", yön: "yön"), çıkış: (el: # , slidr: "veri-slidr-out", çeviri: "geçiş-çıkış", yön: "yön-dışarı"))

Slider.js küresel API'si

slidr global ad alanı aşağıdaki işlevleri sağlar:

/ ** * Mevcut sürüm * @return (string) major.minor.patch. * / işlev sürümü () (); / ** * Mevcut geçiş efektleri. * @return (Dizi) geçişler. * / fonksiyon geçişleri () (); / ** * Slider oluşturur ve döndürür. * Bu işlevi aynı öğe üzerinde iki kez çağırmak, önceden oluşturulmuş Slidr nesnesini döndürür. * Slidr için @param (string) eleman kimliği. * @param (Object =) opt_settings Kaydırıcı ayarları. * / function create (id, opt_settings) ();

Kaydırıcı API'sı

// Slidr'i özel ayarlarla başlat var s = slidr.create ("slidr-api-demo", (breadcrumbs: true, overflow: true)); // Standart geçiş efektiyle yatay slaytlar ekleyin. // sondaki "bir" dizi öğesini çoğaltmak, Slidr'in slaytları sonsuza kadar kaydırmasına izin verir // s.add ("h", ["bir", "iki", "üç", "bir"]); // Küp geçiş efektiyle dikey bir slayt ekler. s.add ("v", ["beş", "dört", "üç", "beş"], "küp"); // Kaydırıcıyı başlatın. s.başlangıç();

Kısa giriş

Var s = slidr.create ("slidr-api-demo", (ekmek kırıntıları: doğru, taşma: doğru)). Ekle ("h", ["bir", "iki", "üç", "bir"]) .add ("v", ["beş", "dört", "üç", "beş"], "küp") .start ();

Slidr.js API işlevlerinin tam listesi aşağıda sunulmuştur.

/ ** * Slider'ı başlatın! * start () çağrısından önce hiçbir şey eklenmemişse oluşturulacak slaytları otomatik olarak bulur. * @param (string) başlangıç ​​için opt_start `data-slidr` kimliği. * @return (bu) * / fonksiyon başlatma (opt_start) (); / ** * Kaydırabiliyor muyuz kontrol edin. * @param (string) yanında bir yön ("yukarı", "aşağı", "sol", "sağ") veya bir "data-slidr" kimliği. * @return (boolean) * / function canSlide (sonraki) (); / ** * Kaymak! * @param (string) yanında bir yön ("yukarı", "aşağı", "sol", "sağ") veya bir "data-slidr" kimliği. * @return (bu) * / fonksiyon slaydı (sonraki) (); / ** * Bir dizi slayt ekler. * @param (string) yön `yatay || h` veya `dikey || v`. * @param (Array) idleri Slidr'a eklenecek `data-slidr` id'lerin listesi. Slaytlar Slidr'in doğrudan çocukları olmalıdır. * @param (string =) opt_transition Slaytlar arasında uygulanacak geçiş veya kullanımlar * @param (boolean =) opt_overwrite Çakışma oluşursa mevcut slayt eşlemelerinin / geçişlerin üzerine yazıp yazılmayacağını * @return (bu) * / function add (yön, ids, opt_transition, opt_overwrite) (); / ** * Otomatik olarak belirli bir zaman aşımından sonra sonraki slayda ilerle. Çağrılar çağrılmamışsa başlar () * @param (int =) opt_msec Her slayt geçişi arasındaki milis sayısı. Varsayılan olarak 5000 (5 saniye) * @param (string = ) opt_direction "yukarı", "aşağı", "sol" veya "sağ" Varsayılan olarak "sağ"dır. * @param (string =) opt_start Başlatılacak `data-slidr` kimliği (yalnızca auto çağrıldığında çalışır) * @return (bu) * / function auto (opt_msec, opt_direction, opt_start) (); / ** * Açıksa otomatik geçişi durdur. * @return (bu) * / fonksiyon stop() (); / ** * Özel animasyon zamanlamaları ayarlayın. * @param (string | Object) geçişi Bir geçiş adı (yani "küp") veya bir ("geçiş": "zamanlama") nesnesi. * @param (string =) opt_timing Yeni animasyon zamanlaması (yani, "0.5s kolaylık"). Geçiş bir nesneyse gerekli değildir. * @return (bu) * / işlev zamanlaması (geçiş, opt_timing) (); / ** * Kırıntıları aç/kapat. * @return (bu) * / function kırıntıları () (); / ** * Kontrolleri aç/kapat. * @param (string =) opt_scheme Mevcut değilse aç/kapat, yoksa düzeni değiştir. "sınır", "köşe" veya "hiçbiri". * @return (bu) * / fonksiyon kontrolleri (opt_scheme) ();

Slaytları değiştirirken sayfayı kaydırma

Bu kötü hata bazı tarayıcılarda görünür. Düzeltmek için gövdeye bir stil eklemeniz gerekir:

Gövde (taşma: gizli;)

Dinamik yeniden boyutlandırma

Slidr, kaydırıcıyı resme sığdırmak için yeniden boyutlandırmanın gerekli olup olmadığını "anlar". Kaydırıcı bloğunun belirtilen boyutları varsa, Slider bunları otomatik olarak değiştirmez. Min-width ve min-height özellikleri belirtilirse, kaydırıcı bu değerler dikkate alınarak içeriğe uyacak şekilde yeniden boyutlandırılacaktır. Aksi takdirde, boyutlandırma otomatik olarak gerçekleştirilecektir.

Otomatik yeniden boyutlandırma

iyi
Muhteşem
Inanılmaz

Statik boyutlar

iyi
Muhteşem
Inanılmaz

Kaydırıcı kontrolleri

Kontroller için işaretleme aşağıdaki gibidir:

CSS seçicilerini kullanarak herhangi bir kaydırıcı kontrolünü özelleştirebilirsiniz:

Kenarda .slidr-control.right (genişlik: 50 piksel! Önemli; yükseklik: 50 piksel! Önemli; üst: %50! Önemli; üst kenar boşluğu: -25 piksel! Önemli; sağ: -25 piksel! Önemli; kenarlık yarıçapı: 25 piksel; arka plan : url ("/ static / images / arrow_right.png") 14px 13px tekrarsız siyah; opaklık: 0.4;) kenara .slidr-control.right: üzerine gelin (opaklık: 1;)

Ok kontrolü: after sözde seçici ile uygulanır, bu yüzden onu gizlemek için aşağıdaki kodu kullanın:

// Tek bir denetleyici içinde tek bir oku gizleyin. kenara .slidr-control.right: after (border-color: şeffaf! önemli;) // Tüm okları tek bir denetleyicide gizleyin. kenara .slidr-kontrol: after (border-color: şeffaf! önemli;) // Tüm Slidr oklarını gizle. kenara .slidr-kontrol: sonra (kenarlık rengi: şeffaf! önemli;)

Kaydırıcı Ekmek Kırıntıları

Ekmek kırıntıları basit HTML işaretlemesine sahiptir. Her ul bir satırın tamamı ve her li ayrı bir kırıntı anlamına gelir:

CSS ile kırıntıları şekillendirme:

// Konumu, boyutu, kenarlık rengini ve arka plan rengini özelleştirin. kenara (sağ: %50! önemli; kenar-sağ: -41px! önemli;) kenara .slidr-breadcrumbs li (genişlik: 15 piksel! önemli; yükseklik: 15 piksel! önemli; kenar boşluğu: 3 piksel! önemli;) kenara .slidr-breadcrumbs li.normal (kenarlık-renk: beyaz! önemli;) kenara .slidr-breadcrumbs li.active (arka plan rengi: siyah! önemli;)

Lisans

Bu yazılımı MIT lisansı altında kullanmak ücretsizdir.

Zaman durmuyor ve onunla birlikte ilerliyor. Bu aynı zamanda internetin genişliğini de etkiledi. Sitelerin görünümünün nasıl değiştiğini zaten görebilirsiniz, duyarlı tasarım özellikle popüler. Ve bu bağlamda, epeyce yenileri ortaya çıktı. duyarlı jquery kaydırıcıları, galeriler, atlıkarıncalar veya benzeri eklentiler.
1. Duyarlı Yatay Gönderiler Kaydırıcısı

Ayrıntılı kurulum talimatlarına sahip uyarlanabilir yatay karusel. Basit bir tarzda yapılır, ancak istediğiniz gibi şekillendirebilirsiniz.

2. Glide.js'de Kaydırıcı

Bu kaydırıcı herhangi bir site için uygundur. Açık kaynak Glide.js kullanır. Kaydırıcı renkleri kolayca değiştirilebilir.

3. Eğik İçerik Slayt Gösterisi

Duyarlı içerik kaydırıcısı. Bu kaydırıcının öne çıkan özelliği, görüntülerin 3B efektinin yanı sıra rasgele sırada farklı görünüm animasyonlarıdır.

4. HTML5 tuvalini kullanan kaydırıcı

Etkileşimli parçacıklarla çok güzel ve etkileyici kaydırıcı. HTML5 tuval kullanılarak yapılır,

5. Kaydırıcı "Morphing görüntüleri"

Geçiş efektli kaydırıcı (Bir nesneden diğerine sorunsuz dönüşüm). Bu örnekte kaydırıcı, bir web geliştiricisinin portföyü veya bir web stüdyosu için portföy olarak iyi çalışır.

6. Dairesel kaydırıcı

Görüntü çevirme efektine sahip daire şeklinde bir kaydırıcı.

7. Bulanık arka plan kaydırıcısı

Anahtarlama ve arka plan bulanıklığı ile uyarlanabilir kaydırıcı.

8. Uyarlanabilir moda kaydırıcısı

Basit, hafif ve duyarlı web sitesi kaydırıcısı.

9. Slicebox - jQuery 3D görüntü kaydırıcısı(GÜNCELLENMİŞ)

Düzeltmeler ve yeni özelliklerle Slicebox kaydırıcısının güncellenmiş sürümü.

10.Ücretsiz Animasyonlu Duyarlı Görüntü Izgarası

Farklı animasyonlar ve zamanlamalar kullanarak çekimleri değiştirecek esnek bir görüntü ızgarası oluşturmak için bir jQuery eklentisi. Bu, yeni görüntülerin görünümünü ve geçişlerini özelleştirebildiğimiz için sitede bir arka plan veya dekoratif öğe olarak işe yarayabilir. Eklenti birkaç versiyonda yapılmıştır.

11. Esnek kaydırıcı

Web siteniz için evrensel ücretsiz eklenti. Bu eklenti, çeşitli kaydırıcı ve atlıkarınca seçenekleriyle birlikte gelir.

12. Fotoğraf çerçevesi

fotoramaçok yönlü bir eklentidir. Birçok ayarı var, her şey hızlı ve kolay çalışıyor, slaytları tam ekran görüntüleme özelliği var. Kaydırıcı hem sabit boyutta hem de küçük resimli veya küçük resimsiz, dairesel kaydırmalı veya kaydırmasız ve çok daha fazla duyarlı şekilde kullanılabilir.

notKaydırıcıyı birkaç kez koydum ve bence en iyilerinden biri

13. Küçük resimlerle ücretsiz ve duyarlı 3D galeri kaydırıcısı.

Deneysel galeri kaydırıcısı 3DPanel Düzeni ağ ve ilginç animasyon efektleriyle.

14. css3'te kaydırıcı

Duyarlı kaydırıcı, pürüzsüz içerik akışı ve hafif animasyon ile css3 kullanılarak yapılır.

15. WOW Kaydırıcısı

Vay kaydırıcı harika görsellere sahip bir resim kaydırıcısıdır.

17. Elastik

Slayt küçük resimleri ile tamamen duyarlı elastik kaydırıcı.

18. Yarık

Css3 animasyonunu kullanan tam ekran duyarlı bir kaydırıcıdır. Kaydırıcı iki versiyonda yapılır. animasyon oldukça sıradışı ve güzel.

19.Uyarlanabilir fotoğraf galerisi artı

Yüklenen resimlerle basit bir ücretsiz kaydırıcı galerisi.

20. WordPress için Duyarlı kaydırıcı

WP için duyarlı ücretsiz kaydırıcı.

21. Paralaks İçerik Kaydırıcısı

Paralaks efektli kaydırıcı ve CSS3 ile her öğenin kontrolü.

22. Bağlantılı müzik içeren kaydırıcı

Açık kaynak JPlayer kullanan kaydırıcı. Bu kaydırıcı, müzikli bir sunuma benzer.

23. jmpress.js ile kaydırıcı

Duyarlı kaydırıcı jmpress.js tabanlıdır ve bu nedenle slaytlarınızda bazı harika 3B efektler kullanmanıza olanak tanır.

24. Hızlı Hover Slayt Gösterisi

Hızlı slayt geçişli slayt gösterisi. Slaytlar fareyle üzerine gelindiğinde açılır.

25. CSS3 ile Görüntü Akordiyonu

css3 kullanarak görüntülerin akordeon.

26. Dokunmayla Optimize Edilmiş Galeri Eklentisi

Dokunmatik cihazlar için optimize edilmiş duyarlı bir galeridir.

27.3D Galeri

3D Duvar Galerisi- 3D efektinin görüneceği Safari tarayıcısı için oluşturuldu. Başka bir tarayıcıda görüntülendiğinde işlevsellik iyi olacak ancak 3D efekti görünmeyecektir.

28. Sayfalandırma kaydırıcısı

jQuery UI kaydırıcısı ile duyarlı sayfalandırma kaydırıcısı. Fikir, basit bir gezinme konsepti kullanmaktır. Tüm görüntüleri geri sarmak veya slaytla kaydırmak mümkündür.

29. jQuery ile Görüntü Montajı

Ekranın genişliğine bağlı olarak görüntülerin otomatik olarak konumlandırılması. Portföy sitesi geliştirirken çok faydalı bir şey.

30.3D Galeri

css3 ve jQuery'de basit 3B dairesel kaydırıcı.

31. css3 ve jQuery'de 3D efektli tam ekran modu

Güzel geçişli tam ekran kaydırıcı.

Otomatik kaydırmalı basit bir kaydırıcıya ihtiyacımız var. Başlayalım ...

Kaydırıcının çalışmasının açıklaması.

Slaytlar belirli bir süre sonra sıralanacak ve kaydırılacaktır.

Kırmızı çerçeve, kaydırıcının görünen kısmını gösterir.

Kaydırıcının sonunda, ilk slaydı çoğaltmanız gerekir. Bu, üçüncü slayttan birinciye geçişi sağlamak için gereklidir. Ayrıca ilk slayttan üçüncü slayta geri kaydırabilmek için son slaydı başa eklemeniz gerekir. Aşağıda, kaydırıcının ileri yönde nasıl çalıştığı gösterilmektedir.

Kaydırıcı sona ulaştığında, kaydırıcının başından bir kopya anında son slaydın yerine yerleştirilir. Sonra döngü tekrar tekrar eder. Bu, sonsuz bir kaydırıcı yanılsaması yaratır.

HTML işaretlemesi

İlk olarak, basit bir otomatik kaydırma kaydırıcısı yapalım. Çalışması için iki konteynere ihtiyacı var. Birincisi, kaydırıcının görünür alanının boyutunu ayarlayacaktır ve ikincisi, kaydırıcıları içine yerleştirmek için gereklidir. Kaydırıcı işaretlemesi şöyle görünecektir:

> >

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: sol; z-endeksi: 0;)

.slider kutusu kabı, kaydırıcının boyutlarını ayarlar. overflow: hidden özelliği, öğenin içindeki alana girmeyen tüm öğeleri gizler.

Kaydırıcı kap, geniş bir genişliğe ayarlanmıştır. Bu, tüm slaytların içine sığması için gereklidir.

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

Aşağıda, kaydırıcı blokların şematik bir yerleşimi bulunmaktadır.

Senaryo

Slaytların hareketi, kapsayıcının kaydırıcı marjı-sol özelliği sorunsuz bir şekilde değiştirilerek yapılacaktır.

$ (işlev () (var genişlik = $ (". kaydırıcı kutusu") .width (); // Kaydırıcı genişliği. aralık = 4000; // Slaytları değiştirme aralığı.$ (". kaydırıcı img: son") .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ğinin soluna kaydırılır. setInterval ("animasyon ()", aralık); // Slaytları değiştirmek için animasyon () işlevi çalıştırılır.)); işlev animasyonu () (var margin = parseInt ($ (". slider") .css ("marginLeft")); // Blok kaydırıcının geçerli ofseti genişlik = $ (". kaydırıcı kutusu") .width (), // Kaydırıcı genişliği. kaydırıcılarAmount = $ (". kaydırıcı") .children () .length; // Kaydırıcıdaki slayt sayısı. if (marj! = (- genişlik * (kaydırıcılarAmount- 1))) // Geçerli slayt son slayt değilse,(kenar boşluğu = kenar boşluğu genişliği; // sonra kenar boşluğu değeri slaydın genişliği kadar azaltılır.) Başka ( // Son slayt gösteriliyorsa,$ (". kaydırıcı") .css ("sol kenar boşluğu", - genişlik); // ardından kaydırıcı bloğu başlangıç ​​konumuna geri döner, kenar boşluğu = - genişlik * 2; ) $ (". kaydırıcı") .animate ((marginLeft: kenar boşluğu), 1000); // Kaydırıcı bloğu 1 slayt sola kaydırılır. } ;

Sonuç, sonsuz otomatik kaydırma özelliğine sahip basit bir kaydırıcıdır.

Başlangıç ​​olarak, bu makale size web sayfaları için bir resim kaydırma kaydırıcısının nasıl oluşturulacağını anlatmak amacıyla yazılmıştır. Bu makale hiçbir şekilde doğada bir öğretim değildir, yalnızca değerlendirme nesnemizi nasıl uygulayabileceğinizin bir örneği olarak hizmet eder. Bu yazıda verilen kodu bu tür gelişmeler için bir tür şablon olarak kullanabilirsiniz, umarım yazdıklarımın tüm özünü okuyucuya yeterince ayrıntılı ve erişilebilir bir şekilde aktarabilirim.



Ve şimdi konuya gelince, çok uzun zaman önce bir siteye bir kaydırıcı koymam gerekiyordu, ancak internette hazır komut dosyaları aradıktan sonra değerli bir şey bulamadım. bazıları ihtiyacım olduğu gibi çalışmadı, bazıları ise konsolda hatasız başlamadı. Kullanmak jQuery - eklentiler kaydırıcı için bana çok ilginç geldi, tk. Bununla sorunu çözecek olsam da, bu mekanizmanın çalışması hakkında bir anlayışa sahip olmayacağım ve eklentiyi bir kaydırıcı uğruna kullanmak çok uygun değil. Ayrıca çarpık komut dosyalarını da gerçekten anlamak istemedim, bu yüzden kaydırıcı için kendi komut dosyamı yazmaya karar verdim, ihtiyacım olduğunda kendim işaretleyeceğim.


İlk olarak, kaydırıcının mantığına karar vermeli ve ardından uygulamaya geçmeliyiz, bu aşamada bu mekanizmanın işleyişini net bir şekilde anlamak çok önemlidir, çünkü onsuz kodu yazamayız. tam istediğimiz gibi çalışıyor.


asıl amacımız şu olacak görüş alanı, yani, resimlerimizin nasıl döndüğünü göreceğimiz bir blok, içinde kaydırıcı, bu, tüm görüntüleri içeren, tek bir satırda dizilmiş ve en içindeki konumunu değiştirecek olan bloğumuz olacaktır. görüş alanı.


Ayrıca, iç taraflarda görüş alanı, dikey olarak ortada, geri ve ileri düğmeleri yer alacak, üzerine tıkladığımızda da konumumuzu değiştireceğiz. kaydırıcı Nispeten görüş alanı, böylece resimler arasında kaydırma etkisine neden olur. Ve son olarak, son nesne, altta bulunan gezinme butonlarımız olacaktır. görüş alanı.


Üzerlerine tıkladığımızda bu butonun seri numarasına bakıp yine kaydırma yaparak ihtiyacımız olan slayda geçeceğiz. kaydırıcı(ofset bir değişiklik yoluyla yapılacaktır css özelliklerini dönüştür, değeri sürekli olarak hesaplanacaktır).


Yukarıda anlattıklarımın ardından bu olayın mantığının netleşmesi gerektiğini düşünüyorum ama yine de bir yerlerde yanlış anlaşılmalar varsa, o zaman aşağıdaki kodda her şey açıklığa kavuşacaktır, biraz sabretmeniz yeterli.


Şimdi yazalım! Öncelikle sitemizi açacağız. dizin dosyası ve ihtiyacımız olan işaretlemeyi oraya ekleyin:



Gördüğünüz gibi, karmaşık bir şey yok kaydırıcı için blok kaydırıcımızın yerleştirileceği aynı blok olarak hizmet eder, kendi içinde görüş alanı hangi bizim kaydırıcı, aka iç içe liste, burada li slaytlar ve resim- içlerindeki resimler. Lütfen tüm resimlerin aynı boyutta veya en azından oranlarda olması gerektiğine dikkat edin, aksi takdirde kaydırıcı çarpık görünecektir, tk. boyutları doğrudan görüntünün en boy oranına bağlıdır.


Şimdi her şeyi stilize etmemiz gerekiyor, genellikle stiller hakkında gerçekten yorum yapılmaz, ancak ilerde yanlış anlaşılma olmasın diye buna dikkat çekmeye karar verdim.


gövde (kenar boşluğu: 0; dolgu: 0;) # kaydırıcı bloğu (genişlik: 800 piksel; kenar boşluğu: 0 otomatik; kenar boşluğu: 100 piksel;) #görünüm noktası (genişlik: %100; görüntü: tablo; konum: göreli; taşma: gizli; -webkit-kullanıcı-seçimi: yok; -moz-kullanıcı-seçimi: yok; -ms-kullanıcı-seçimi: yok; -o-kullanıcı-seçimi: yok; kullanıcı-seçimi: yok;) #slidewrapper ( konum: göreli; genişlik: hesap (%100 * 4); üst: 0; sol: 0; kenar boşluğu: 0; dolgu: 0; -webkit-geçişi: 1s; -o-geçişi: 1s; geçiş: 1s; -webkit -geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; -o-geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı;) #slidewrapper ul, #slidewrapper li (marj : 0; dolgu: 0;) #slidewrapper li (genişlik: calc (%100 / 4); liste stili: yok; görüntü: satır içi; kayan nokta: sol;) .slide-img (genişlik: %100;)

İle başlayalım kaydırıcı için blok, tekrar ediyorum, bu, kaydırıcı için ayıracağımız sayfadaki bloğumuz, yüksekliği genişliğine ve resmimizin oranlarına bağlı olacaktır, çünkü görüş alanı tüm genişliği kaplar kaydırıcı için blok sonra kendim kaymak aynı genişliğe sahiptir ve buna göre içindeki resim, genişliğe bağlı olarak yüksekliğini değiştirir (oranlar korunur). Bu öğeyi sayfamın ortasına yatay olarak yerleştirdim, üstten 100 piksel doldurdum, konumunu bir örnek için daha uygun hale getirdim.


eleman görüş alanı, daha önce de belirtildiği gibi, tüm genişliğimizi kaplar kaydırıcı için blok, özelliği var taşma: gizli, görünümün dışındaki görüntü beslememizi gizlememize izin verecek.


Takip etme css özelliği - kullanıcı seçimi: yok, düğmelere birden fazla tıklama ile tek tek kaydırıcı öğelerinin mavi seçiminden kurtulmanızı sağlar.


devam etmek kaydırıcı Niye pozisyon: göreceli, Ama değil mutlak? Her şey çok basit, tk. ikinci seçeneği seçersek, o zaman özellik ile görüntü alanı taşması: gizli kesinlikle hiçbir şey bize görünmeyecek, tk. kendim görüş alanı yüksekliğe ayarlanmayacak kaydırıcı, sahip olacağından dolayı yükseklik: 0... Genişlik neden bu kadar önemli ve neden ayarlıyoruz? Mesele şu ki, slaytlarımız eşit bir genişliğe sahip olacak Görünüm alanının %100'ü, ve onları bir sıraya dizmek için duracakları bir yere ihtiyacımız var, dolayısıyla genişlik kaydırıcı eşit olmalı %100 görüntü alanı genişliği slayt sayısıyla çarpılır (benim durumumda 4). İlişkin geçiş ve geçiş-zamanlama-fonksiyonu sonra burada 1s pozisyon değişikliği anlamına gelir kaydırıcı 1 saniye içinde gerçekleşecek ve bunu gözlemleyeceğiz ve giriş-çıkış kolaylığı- ilk başta yavaş gittiği, ortaya hızlandığı ve sonra tekrar yavaşladığı animasyon türü, burada değerleri zaten kendi takdirinize göre ayarlayabilirsiniz.


Bir sonraki özellik kümeleri bloğu kaydırıcı ve çocukları sıfır dolguya sahiptir, burada yorum gereksizdir.


Ardından, slaytlarımızı şekillendireceğiz, genişlikleri genişliğe eşit olmalıdır. görüş alanı, ama o zamandan beri içerdeler kaydırıcı genişliği, slayt sayısıyla çarpılan görünüm alanının genişliğine eşittir, ardından genişliği elde etmek için görüş alanı yine, genişliğin %100'üne ihtiyacımız var kaydırıcı slayt sayısına bölün (benim durumumda yine 4'e). Sonra bunları kullanarak satır içi öğelere dönüştürüyoruz. ekran: satır içi ve özelliği ekleyerek akışı sola ayarlayın yüzer: sol... Hakkında liste stili: yok Varsayılan işaretçiyi kaldırmak için kullandığımı söyleyebilirim. li, çoğu durumda bir tür standarttır.


İle birlikte slayt-img her şey basit, resim tüm genişliği kaplayacak kaymak, kaymak yüksekliğine göre ayarlanır, kaydırıcı yüksekliğe göre ayarlanır kaymak ve yükseklik görüş alanı sırayla yükseklik değerini alacak kaydırıcı, bu nedenle kaydırıcımızın yüksekliği, görüntünün oranlarına ve yukarıda zaten yazdığım kaydırıcı için sağlanan bloğun boyutuna bağlı olacaktır.


Sanırım stilleri burada bulduk, şimdilik butonsuz basit bir slayt gösterisi yapalım ve düzgün çalıştığından emin olduktan sonra bunları ekleyip stillendirelim.


hadi bizimkileri aç js dosyası kaydırıcı kodunu içerecek, eklemeyi unutmayın jQuery dan beri bu çerçeveyi kullanarak yazacağız. Bu arada, bu yazıyı yazarken sürümü kullanıyorum. jQuery 3.1.0... Komut dosyasının kendisi etiketin en sonuna eklenmelidir. vücut dan beri önce başlatılması gereken DOM öğeleriyle çalışacağız.


Şimdilik, birkaç değişken tanımlamamız gerekiyor, biri zaman içinde belirli bir noktada gördüğümüz slayt numarasını saklayacaktır. görüş alanı, ona isim verdim şimdi slayt, ve ikincisi aynı slaytların sayısını depolayacaktır, bu slaytCount.


var slideNow = 1; var slideCount = $ ("# slidewrapper").child().length);

Değişken şimdi slayt başlangıç ​​değerini 1 ayarlamak gereklidir, çünkü sayfa yüklendiğinde, işaretlememize dayanarak ilk slaydı göreceğiz görüş alanı.


V slaytCountçocuk sayısını koyacağız kaydırıcı, burada her şey mantıklı.
Ardından, slaytları sağdan sola değiştirmekten sorumlu olacak bir işlev oluşturmanız gerekiyor, bunu ilan edeceğiz:


işlev nextSlide () ()

Onu kodumuzun ana bloğunda arayacağız, buna ulaşacağız, ancak şimdilik fonksiyonumuza ne yapması gerektiğini söyleyeceğiz:


nextSlide () işlevi (if (slideNow == slideCount || slideNow)<= 0 || slideNow >slideCount) ($ ("# slidewrapper").css ("dönüştür", "translate (0, 0)"); slideNow = 1;) else (translateWidth = - $ ("# viewport"). width () * ( slideNow); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0) ) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow ++;))

Başlangıç ​​olarak, şimdi feed'imizin son slaydında olup olmadığımızı kontrol ediyoruz. Bunu yapmak için, kullanarak tüm slaytlarımızın sayısını alıyoruz. $ ("# slayt sarmalayıcı").çocuklar().uzunluk ve slaytımızın numarasıyla kontrol edin, eğer eşitlerse, bu, 1 slayttan şeridi tekrar göstermeye başlamamız gerektiği anlamına gelir, bu, değiştirdiğimiz anlamına gelir. css dönüştürme özelliği NS kaydırıcıüzerinde çevir (0, 0), böylece ilk slaytın görüş alanımızda görünmesi için orijinal konumuna kaydırarak, şunu da unutmayın. –Webkit ve –ms yeterli çapraz tarayıcı gösterimi için (bkz. css özellikleri referansı). Bundan sonra değişkenin değerini güncellemeyi unutmayalım. şimdi slayt, 1 numaralı slaydın görüş alanında olduğunu ona bildirerek: slaytŞimdi = 1;


Aynı koşul, gördüğümüz slayt numarasının slaytlarımızın sayısı içinde olup olmadığını kontrol etmeyi içerir, ancak bir şekilde bu sağlanmazsa, 1. slayta döneriz.


İlk koşul karşılanmazsa, o zaman bu, şu anda son slaytta veya var olmayan bir slaytta olmadığımız anlamına gelir, bu da bir sonrakine geçmemiz gerektiği anlamına gelir, bunu kaydırarak yapacağız. kaydırıcı genişliğe eşit bir değerle sola görüş alanı, yer değiştirme yine tanıdık özellik aracılığıyla gerçekleşecektir. Çevirmek kimin değeri eşit olacak "translate (" + translateWidth + "px, 0)", nerede tercüme Genişliği- bizim mesafemiz kaydırıcı... Bu arada, kodumuzun başında bu değişkeni bildirelim:


var translateWidth = 0;

Bir sonraki slayda geçtikten sonra, slaytımıza bir sonraki slaydı gördüğümüzü söyleyin: slaytŞimdi ++;


Şu anda bazı okuyucuların bir sorusu olabilir: neden değiştirmedik? $ ("# görünüm alanı"). genişlik () bazı değişkenlere, örneğin slayt Genişliği slaytımızın genişliğini her zaman elinizin altında bulundurmak için? Cevap çok basit, eğer sitemiz duyarlıysa, buna göre, kaydırıcı için ayrılan blok da uyarlanabilir, bundan, sayfayı yeniden yüklemeden pencere genişliğinin boyutunu değiştirirken (örneğin, döndürme) anlaşılabilir. telefon yana doğru), genişlik görüş alanı değişecek ve buna göre bir slaydın genişliği de değişecektir. Bu durumda, bizim kaydırıcı orijinal genişlik değeri ile kaydırılacaktır, bu da resimlerin parçalar halinde görüntüleneceği veya hiç görüntülenmeyeceği anlamına gelir. görüş alanı... Fonksiyonumuza yazarak $ ("# görünüm alanı"). genişlik () onun yerine slayt Genişliği slaytları her değiştirdiğimizde genişliği hesaplamasını sağlıyoruz görüş alanı, böylece ekran genişliği aniden değiştiğinde istenen slayda bir kaydırma sağlar.


Ancak fonksiyonu yazdık, şimdi belirli bir zaman aralığından sonra çağırmak gerekiyor, aralığı bir değişkende de saklayabiliriz, böylece istenirse değiştirebiliriz, kodda sadece bir değeri değiştirin:


var slideInterval = 2000;

Js cinsinden süre milisaniye cinsinden belirtilir.


Şimdi aşağıdaki yapıyı yazalım:


$ (belge) .ready (işlev () (setInterval (nextSlide, slideInterval);));

Her şey daha kolay değil, inşaatın içerisindeyiz $ (belge) .ready (işlev () ()) belge tamamen yüklendikten sonra aşağıdaki işlemlerin yapılması gerektiğini söylüyoruz. O zaman sadece işlevi çağırırız sonraki slayt eşit bir aralık ile slaytAralık, yerleşik işlevi kullanarak setAralık.


Yukarıda gerçekleştirdiğimiz tüm işlemlerden sonra kaydırıcımız iyi dönmeli, ancak bir şeyler ters gittiyse, sorun sürümde olabilir. jQuery, veya herhangi bir dosyanın yanlış bağlantısında. Ayrıca, kodda bir yerde hata yapmış olabileceğinizi dışlamanıza gerek yok, bu yüzden size sadece her şeyi iki kez kontrol etmenizi tavsiye edebilirim.


Bu arada, devam edin, kaydırıcımıza vurgulu kaydırmayı durdurma gibi bir işlev ekleyin, bunun için ana kod bloğuna yazmamız gerekiyor ($ (belge) içinde .ready (işlev () ())) Böyle bir şey:


$ ("# viewport").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval (nextSlide, slideInterval);));

Bu kodu analiz etmeye başlamak için, ne olduğunu bilmemiz gerekiyor. anahtarAralık... İlk olarak, nextSlide işlevine yapılan periyodik bir çağrıyı saklayan bir değişkendir, basitçe söylemek gerekirse, bu kod satırını kullanıyoruz: setInterval (sonrakiSlide, slideInterval);, şuna dönüştü: switchInterval = setInterval (nextSlide, slideInterval);... Bu manipülasyonlardan sonra ana kod bloğumuz aşağıdaki formu aldı:


$ (belge) .ready (function () (var switchInterval = setInterval (nextSlide, slideInterval); $ ("# viewport").hover (function () (clearInterval (switchInterval);), function () (switchInterval = setInterval ( nextSlide, slideInterval);));));

Burada olay kullanıyorum üzerine gelmek"vurgulu" anlamına gelen bu olay, bir nesnenin üzerine geldiğim anı izlememe izin veriyor, bu durumda görüş alanı.


Gezindikten sonra, parantez içinde belirteceğim boşlukları temizliyorum (bu bizim anahtarAralık), sonra virgülle ayırarak imleci geri hareket ettirdiğimde ne yapacağımı yazarım, bu blokta tekrar anahtarAralık periyodik fonksiyon çağrısı sonraki slayt.


Şimdi, kontrol edersek, kaydırıcımızın fareyle üzerine gelindiğinde nasıl tepki verdiğini ve slayt geçişini durdurduğunu göreceğiz.


Şimdi kaydırıcımıza butonları eklemenin zamanı geldi, ileri geri butonlarla başlayalım.


Her şeyden önce, onları işaretleyelim:



İlk başta, bu işaretleme anlaşılmayabilir, hemen söyleyeceğim, bu iki düğmeyi bir araya getirdim. div sınıf ile önceki-sonraki-btns sadece rahatınız için, bunu yapmanıza gerek yok, sonuç değişmeyecek, şimdi onlara stiller ekleyeceğiz ve her şey netleşecek:


# önceki-btn, # sonraki-btn (konum: mutlak; genişlik: 50 piksel; yükseklik: 50 piksel; arka plan rengi: #fff; kenarlık yarıçapı: %50; üst: hesap (%50 - 25 piksel);) # önceki- btn: vurgulu, # sonraki-btn: vurgulu (imleç: işaretçi;) # önceki-btn (sol: 20px;) # sonraki-btn (sağ: 20px;)

İlk olarak butonlarımızı konumlandırıyoruz. pozisyon: mutlak, böylece kendi içimizde konumlarını özgürce kontrol edeceğiz. görüş alanı, sonra bu düğmelerin boyutlarını belirteceğiz ve sınır yarıçapı köşeleri yuvarlayın, böylece bu düğmeler daireye dönüşür. Renkleri beyaz olacak, yani #fff ve üst kenardan girintileri görüş alanı bunun yüksekliğinin yarısına eşit olacak görüş alanı düğmenin yüksekliğinin yarısı (benim durumumda 25 piksel), böylece onları ortada dikey olarak konumlandırabiliriz. Ardından, üzerlerine geldiğimizde imlecimizin olarak değişeceğini belirteceğiz. Işaretçi ve son olarak, düğmelerimize tek tek kenarlarından 20 piksel girinti yapmalarını söyleyin, böylece onları uygun gördüğümüz şekilde görebiliriz.


Yine sayfa öğelerini istediğiniz gibi şekillendirebilirsiniz, sadece kullanmaya karar verdiğim stillerden bir örnek veriyorum.


Şekillendirmeden sonra kaydırıcımız şöyle görünmelidir:


Ardından, bize geri dönün js dosyası düğmelerimizin nasıl çalıştığını açıkladığımız yer. Peki, başka bir fonksiyon ekleyelim, bize bir önceki slaydı gösterecek:


işlev prevSlide () (if (slideNow == 1 || slideNow)<= 0 || slideNow >slideCount) (translateWidth = - $ ("# viewport"). width () * (slideCount - 1); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px, 0) ) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); slideNow = slideCount;) else (translateWidth = - $ ("# viewport"). width () * (slideNow - 2); $ ("# slidewrapper").css ("transform": "translate (" + translateWidth + "px) , 0) "," -webkit-transform ":" translate ("+ translateWidth +" px, 0) "," -ms-transform ":" translate ("+ translateWidth +" px, 0) ",)); şimdi slayt--;))

denir prevSlide, sadece üzerine tıkladığınızda çağrılacak önceki btn... İlk önce 1. slaytta olup olmadığımızı kontrol ediyoruz, burada da bizim slaytta olup olmadığımızı kontrol ediyoruz. şimdi slayt slaytlarımızın gerçek aralığının sınırlarının ötesinde ve koşullardan herhangi biri işe yararsa, kaydırarak son slayta geçeceğiz. kaydırıcı ihtiyacımız olan değere. Bu değeri şu formülle hesaplayacağız: (bir slaydın genişliği) * (slayt sayısı - 1), tüm bunları eksi işaretiyle alıyoruz, çünkü sola kaydırıyoruz, ortaya çıkıyor görüş alanışimdi bize son slaydı gösterecek. Bu bloğun sonunda değişkeni de söylememiz gerekiyor. şimdi slayt son slayt artık görüş alanımızda.


İlk slaytta değilsek, 1 geriye gitmemiz gerekiyor, bunun için tekrar özelliği değiştiriyoruz. kaydırıcı için dönüştürme... Formül şu şekildedir: (bir slaydın genişliği) * (geçerli slaydın sayısı - 2), yine tüm bunları eksi işaretiyle alıyoruz. Ama neden -1 değil de -2, tam olarak 1 slaydı geri almamız gerekiyor? Gerçek şu ki, eğer 2. slayttaysak, o zaman değişken xözellikler dönüştürmek: çevir (x, 0) bizim kaydırıcı zaten bir slaydın genişliğine eşit, ona mevcut slaydın sayısından 1 çıkarmamız gerektiğini söylersek, zaten kaydırıldığı birimi tekrar alırız kaydırıcı, bu yüzden bu genişlikleri 0 ile kaydırmanız gerekecek görüş alanı, yani slaytta - 2.



Şimdi sadece bu satırları ana kod bloğuna eklememiz gerekiyor:


$ ("# next-btn").tıklayın (işlev () (nextSlide ();)); $ ("# prev-btn").tıklayın (function () (prevSlide ();));

Burada sadece butonlarımıza bir tıklama yapılıp yapılmadığını takip ediyoruz ve bu durumda ihtiyacımız olan fonksiyonları çağırıyoruz, her şey basit ve mantıklı.


Şimdi kaydırmalı gezinme düğmelerini, işaretlemeye geri ekleyelim:



Görüldüğü gibi içeride görüş alanı iç içe bir liste belirdi, ona bir tanımlayıcı verin nav-btns, içinde li- gezinme butonlarımız, onlara bir sınıf atayacağız slayt-nav-btn, ancak, işaretlemeyi bitirebiliriz, hadi stillere inelim:


# nav-btns (konum: mutlak; genişlik: %100; alt: 20 piksel; dolgu: 0; kenar boşluğu: 0; metin hizalama: merkez;) .slide-nav-btn (konum: göreli; görüntü: satır içi blok; liste stili: yok; genişlik: 20 piksel; yükseklik: 20 piksel; arka plan rengi: #fff; sınır yarıçapı: %50; kenar boşluğu: 3 piksel;) .slide-nav-btn: vurgulu (imleç: işaretçi;)

blok nav-btns, butonlarımızın bulunduğu özelliği veriyoruz pozisyon: mutlak uzamasın diye görüş alanı yüksekliğinde, çünkü NS kaydırıcı Emlak pozisyon: göreceli, genişliği %100 olarak ayarladık, böylece metin hizalama: orta orta düğmeler yatay olarak göreli görüş alanı, ardından özelliği kullanarak alt alt kenardan 20 piksel uzaklıkta olması gerektiğini bloğumuza açıkça belirtiyoruz.


Aynısını slaytlarda olduğu gibi düğmelerle yapıyoruz, ancak şimdi onları ayarlıyoruz ekran: satır içi blok dan beri NS ekran: satır içi tepki vermiyorlar Genişlik ve boy uzunluğu dan beri kesinlikle konumlandırılmış bir blokta. Renklerini beyaz yapacağız ve zaten bize tanıdık gelenlerin yardımıyla sınır yarıçapı onlara bir daire şekli verin. Üzerlerine geldiğinizde, normal ekran için imlecimizin görünümünü değiştireceğiz.


şimdi aşağı inelim jQuery - parçalar:
İlk olarak, tıkladığımız butonun indeksini saklayacak olan navBtnId değişkenini bildirelim:


var navBtnId = 0;
$ (". slide-nav-btn"). (fonksiyon () (navBtnId = $ (bu) .index (); if (navBtnId + 1! = slideNow) (translateWidth = - $ ("# görünüm alanı") öğesini tıklayın. genişlik () * (navBtnId); $ ("# slayt sarmalayıcı").css (("dönüştür": "çevir (" + translateWidth + "px, 0)", "-webkit-transform": "translate (" + translateWidth + "px, 0)", "-ms-transform": "translate (" + translateWidth + "px, 0)",)); slideNow = navBtnId + 1;)));

Buraya tıkladığımızda buradayız slayt-nav-btnöncelikle değişkene atayan işlevi çağırırız navBtnId tıklanan düğmenin dizini, yani sıra numarası, sayım sıfırdan başladığından, ikinci düğmeye tıklarsak, o zaman navBtnId değer 1 yazılır. Ardından, geri sayım 0'dan değil de 1'den gibi bir sayı elde etmek için düğmenin seri numarasına bir tane eklediğimiz bir kontrol yaparız, bu sayıyı sayı ile karşılaştırırız. geçerli slayt, çakışırlarsa, herhangi bir işlem yapmayacağız, çünkü istenen slayt zaten görüş alanı.


İhtiyacımız olan slayt gözden uzaksa görüş alanı, sonra kaydırmamız gereken mesafeyi hesaplıyoruz kaydırıcı sola, ardından değeri değiştirin çeviride css dönüştürme özellikleri(piksel olarak aynı mesafe, 0). Bunu zaten bir kereden fazla yaptık, bu yüzden soru olmamalı. Sonunda mevcut slaydın değerini tekrar bir değişkene kaydediyoruz. şimdi slayt, bu değer tıklanan düğmenin dizinine bir tane eklenerek hesaplanabilir.


Hepsi bu, aslında, eğer bir şey net değilse, o zaman malzemede yazılan tüm kodun sağlanacağı jsfiddle'a bir link bırakıyorum.




Dikkatiniz için teşekkürler!

Etiketler: Etiket Ekle