JQuery kütüphanesi: Web siteniz için kayan

Zamanın geçişi ve web tasarımı alanında değişen ve içerik sitelerine kullanıcıların gereksinimlerini / gereksinimleri vardır teknolojinin gelişmesiyle birlikte. çoğunlukla tematik görüntülerin az sayıda metin içeriği olduğunu daha önce ise, bugün grafik baskın bileşenidir. O hızla en gerekli ve yararlı bilgileri almak için, ve uzun metinleri okuyarak vakit kaybetmeyin verir. aslında, bu giderek daha popüler ve bağlantılı olarak, bir web sayfasının gerekli bir unsur sürgü. görüntülerden bağlantıları - Üzerlerinde içeriği değişen taşlarıdır. JQuery kütüphanesini kullanarak - Modern yolu, belirli bir web nesnesi ekleyin. Bu aracı ile oluşturulan sürgü, kullanımı kolay, rahat olsun, ve çok etkileyici görünüyor. Sonraki biz kendi web sayfalarının, bu öğelerin nasıl bakmak. standartlaştırılmış araçlar yeterli sayıda sayesinde JQuery kaydırıcı tipi ve farklı içerik uygulamak mümkündür.

Nasıl bir web sayfasında bir kaydırıcı eklenir?

Yolları bir slayt blokları eklemek üzere sayfasına numara. Genellikle hatta HTML-kod yazmak ve komut dalmak gerekmez. Kullanıcılara sitenizde JQuery-kaydırıcıları ekleyelim bir hazır şablonları sunan ücretsiz kütüphanelerin önemli sayıda vardır. Yapmanız gereken tek şey - web sayfasının kaynak koduna kopyalayıp sonuçlarını zevk etmektir. Ancak bu durumda da yaratıcı hayal gerçekleşme olasılığı sınırlıdır. Nedenle, bağımsız bir şekilde, bir desen elemanının oluşturmak mümkün yararlıdır. Bunu yapmak için, JQuery basit bir kaydırıcı nasıl uygulanacağı bilmek gerekir ve sadece bunu zorlaştırmak daima kodda ekstra unsurlar ekleyerek yapabilirsiniz.

kendiniz bir kaydırıcı oluşturun: HTML kodundaki

İlk olarak, nereden başlayacağınızı - kaydırıcı gelecekteki düzeni kayıt etmek.

1. Bizim slaytlar tüm içerecektir HTML dosyası Slayt ünitesi (resimler, vb) kurulan.
2. Bu her paragraf ayrı slayt saklayacak, ul liste yatıyordu.

Biz CSS ile çalışıyoruz

Sonra buna CSS-dokümanı kullanarak istenen stil özelliklerini uygulamak. O düzgün çalışması için içerik JQuery kaydırıcı empoze etmek gerekir ve sağ göz vardı. Bu aşamada, aşağıdaki görevlerle karşı karşıya:

• Slayt ünitesinde doğru anda slayt (veya resim içeriği) de, tek görüntüler ve dinlenme gizli emin olmak;
• slaytlar (soldan sağa) birbiri ardına düzenlemek;
• hareket edebilen (sol ve sağ) slaytlar depolayan ül-kap yapmak.

Bunu yapmak için, CSS-dosyasında aşağıdaki seçenekleri ayarlayın:

• Slayt gösterisi için: taşma-x - taşma-y kaydırma - gizli:
• ul için: şamandıra - bıraktı.

Ayrıca benzeri genişliği parametreleri (genişlik), height (yükseklik), arka plan (arka plan) ve ayarlayabilirsiniz.

Biz JQuery Bu kodu koymak

HTML ve CSS gerekli tüm değişiklikleri yapılmıştır. Aşağıdaki parametrelere sahip olması gerekir JQuery kodu, sürgü, için durum kalır:

• Slaytlar belirli bir zaman aralığı ile birbirlerine başarılı olmalıdır;
• Eğer getirdiğinizde üzerine fare işaretçisi kendi hareketi durdurulmalıdır.

ve slidertime (sürgünün uzunluğuna eşit) slidewidth (belirleyen slayt gösterisi süresi): Bunu yapmak için, iki değişken bildirmek. sayfa tam dolu sitesi olduğunda zamanlayıcı başlayacaktır. Bu parametre ile biz (slayt gösterisi durur) bir sürgü fare işaretçisi işaret eden bir işlem bağlar.

ül konteyner uzunluğu reçete emin olun. Her sürgünün uzunluğu ile çarpımı slaytlar sayısına eşit olacaktır.

slaytlar değişen sorumlu işlevini yerleştirin. Yani sizin kaydırıcı performansını kontrol edebilirsiniz, hepsi bu.

Sonuç

Bu yazıda sitesinde bir sayfa eklemek için kendi JQuery-kaydırıcıları nasıl oluşturulacağını baktı. Basit bir kaydırıcı örneğini kullanarak, kaynak koduna uygun değişiklikleri yaparak, bunun kendi yorumuyla gelebilir. Bu tasarımını geliştirmek ve ziyaretçiler için sitenizin kullanımı daha da kolaylaştıracaktır.