1. jQuery eklentisi “Fresco”
Küçük resimler ve resim yazıları içeren bir açılır pencerede görüntülenen, duyarlı jquery galerisi (ekran çözünürlüğü değiştiğinde yeniden boyutlandırılır). Jquery galerisi "Fresco" çoğu tarayıcıda düzgün çalışır: IE6+, Firefox 3+, Chrome 5+, Opera 9+. Bu eklentinin ücretsiz sürümü yalnızca ticari olmayan projelerde kullanılabilir.
2. “Adaptör” kaydırıcısı
Çeşitli geçiş efektlerine sahip kaydırıcı (3D dahil 7 farklı efekt). Github'daki proje.
3. Çeşitli efektlere sahip kaydırıcı eklentisi “jQ-Tiles”
Çeşitli geçiş efektleri, özelleştirilebilir kaydırma hızı ve otomatik kaydırma işlevine sahip eklenti.
4. jQuery eklentisi “Sly”
Dikey ve yatay kaydırma çubuğunu uygulamak için eklenti. Github'daki proje.
5. Animasyonlu CSS3 “Makisu” menüsü
6. Basit slayt gösterisi
7. İşlevsel jQuery kaydırıcısı “iView Slider v2.0”
İçerik kaydırıcısı/slayt gösterisi (slayt yalnızca görüntüleri değil aynı zamanda video klipleri ve diğer HTML içeriğini de içerebilir). Gezinme için şunları kullanabilirsiniz: küçük resimler, Sol/Sağ düğmeleri ve klavyeyi kullanma. Github.com'daki proje.
8. jQuery eklentileri seti “Vanity”
Set 7 eklenti içerir: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder ve jCollapse. Bu çözümlerden oluşan bir set, kaydırıcıyı, araç ipuçlarını, sekmeleri, açılır görüntü açıklamalarını vb. uygulamanıza yardımcı olacaktır.
9. CSS3 efektinin üzerine gelin
10. CSS3 Açılır Menüsü
11. iOS kaydırıcısı
Mobil cihazlarda çalışmak üzere tasarlanmış bir kaydırıcı.
12. CSS3 yükleme göstergesi
13. CSS3 vurgulu efekti
14. “Ürün Renklendirici” jQuery eklentisi
Eklenti, farklı renk seçeneklerindeki ürünleri görüntülemek için kolay bir çözümdür (örneğin, ziyaretçilerin seçim yapmasına olanak tanıyan çevrimiçi giyim mağazalarıyla ilgilidir). renk şemasıÇeşitli seçeneklerden ürün). Eklentinin çalışması için her ürün için yalnızca iki görsele ihtiyacınız vardır (tüm renkler maske olarak kaplanacaktır). Eklenti, IE7+ dahil tüm önemli tarayıcılarda çalışır (PNG şeffaflık görüntüsünü düzeltirseniz IE6'da da çalışır). GitHub'daki proje.
15. CSS3 animasyonlu grafikler
16. Bir görsele tıkladığınızda bir kaplama efekti yaratın
Bir resme tıkladığınızda kararır, arka plana gider ve altyazılı öğeler görünür. Bu şekilde verebilirsiniz kısa açıklama görüntüde bulunan öğeler.
17. Açılır menü olarak sayfada gezinme
Açılır menü biçiminde belgede kullanışlı gezinmeyi uygulamaya yönelik bir çözüm. İçerik ekranın üst kısmına sabitlenir ve her zaman izleyicinin görüş alanında kalır. Menüde bir bölüm seçtiğinizde sayfa, belgenin seçilen kısmına doğru düzgün bir şekilde kayar.
18. Vurgulu efektli CSS3 galerisi
İmlecinizi bir görselin üzerine getirdiğinizde fotoğraflar hızla değişir. Galeri iki versiyonda uygulanmaktadır: ziyaretçi imleci galeriden uzaklaştırdıktan sonra görünen resimlerin açıklamasıyla ve açıklama olmadan.
19. Paralaks efektli jQuery kaydırıcısı
20. Blokların üzerine gelindiğinde CSS3 animasyonu
21. CSS3 jQuery açılır paneli
Açılır simgeleri görmek için demo sayfasında ekranın alt kısmındaki oka tıklayın.
22. Ücretsiz HTML5 resim galerisi “Juicebox Lite”
Site için çok işlevsel yeni bir resim galerisi. Galeri, küçük resimli veya küçük resimsiz, resim açıklaması olsun veya olmasın olabilir, tam ekrana genişletilebilir veya sabit boyutlu bir sayfada görüntülenebilir. Demo sayfasında beğendiğiniz galeri görünümünü seçebilirsiniz. İndirilebilir ücretsiz sürüm galeriler. Daha gelişmiş işlevsellik için ödeme yapmanız ve geliştirici logosunu kaldırmanız gerekecektir.
23. Eklenti “JQVMap”
24. Paralaks efektli CSS3 kaydırıcısı
25. Küçük resimlerle jQuery fotoğraf galerisi
Duyarlı galeri, resim ve küçük resim boyutları, tarayıcı penceresinin boyutuna göre değişir.
26. jQuery içerik kaydırıcı eklentisi “Horinaja”
Eklentinin kurulumu kolaydır, özelleştirilebilir ve tarayıcılar arası uyumludur. Yalnızca resimler değil, herhangi bir HTML içeriği slayt görevi görebilir. İmleç slayt alanındayken fare tekerleğini kullanarak slaytları kaydırabilirsiniz.
27. jQuery kaydırıcı eklentisi “Pikachoose”
Üç varyasyonda: açıklamalar ve küçük resimler olmadan basit bir görsel değişikliğinin uygulanması; resim yazıları ve küçük resimler içeren kaydırıcı; küçük resimler içeren kaydırıcı ve FancyBox efektiyle açılır pencerede daha büyük bir görüntünün açılması eklendi. En son sürüm her zaman Github'da bulunabilir.
28. Açılır listeler için çeşitli özel CSS stilleri
Farklı CSS tekniklerini kullanan beş farklı açılır liste stili.
29. Animasyonlu 3D efektli restoran menüsü
Sayfadaki bilgilerin ilginç CSS jQuery sunumu. Bağlantıya tıklandığında menü kitapçığı açılır ve ziyaretçi, açılır pencerede sunulan yemekler hakkında daha fazla bilgi edinebilir. Animasyon IE'de düzgün görüntülenmiyor.
30. Eklenti “Elastislide”
Kauçuk uyarlamalı karuselin (dikey ve yatay resim karuseli) ve resim galerisinin uygulanması. Tarayıcı penceresini küçültmek, görsellerin sayısını belirli bir minimum değere düşürür ve ardından kalan görsellerin boyutunu ölçeklendirir. Github'daki proje.
31. Yeni CSS3 jQuery kaydırıcısı “Yarık Kaydırıcısı”
Slaytları değiştirirken ilginç bir animasyon efektine sahip (slayt ikiye bölünür ve birbirinden ayrılır) iki stilde uyarlanabilir bir kaydırıcı eklentisi (genişlik yüzde olarak ayarlanabilir ve otomatik olarak ölçeklenir) farklı taraflar ve onun yerine yenisi gelir). Klavyeyi kullanarak gezinmek mümkündür. En son sürüm her zaman Github'dadır.
32. 3D görüntü kaydırıcısı “Slicebox”ın yeni versiyonu
Değişiklikler ve yeni özellikler eklenen yeni sürüm: artık 3D kaydırıcı ölçeklenebilir, bunu tarayıcı penceresini küçülttüğünüzde görebilirsiniz; Firefox desteği eklendi; Slayt açıklamasında HTML içeriğini zaten kullanabilirsiniz (daha önce açıklama, içinde HTML etiketleri kullanma özelliği olmadan bağlantı özelliğinden alınıyordu). Demo sayfasında eklentiyi kullanmak için 4 seçenek görebilirsiniz. En son sürüm Github.com'da yaşıyor.
Etki, Flash galerisi 3D CU3ER'ye (demo, indirme) çok benzer, yalnızca bu 3D kaydırıcı flash teknolojileri kullanılarak değil, javascript kullanılarak yapılmıştır.
33. jQuery eklentisi “PFold”
Deneysel çözüm. Eklenti, bir notun açılmasını simüle eden bir 3D efekti uygular. Çeşitli seçenekler yürütmeler: üç yayılımlı, iki yayılımlı ve açılmış notanın daha sonra ortalandığı bir yayılım.
34. jQuery eklentisi “Rüzgarlı”
Resimler gibi içeriklerde gezinmek için eklenti. Fotoğraflar arasında gezindiğinizde, farklı yönlere doğru uçuyorlar (bu etki bir şekilde kart oyunu pokerinde kart dağıtmayı andırıyor). Gezinmek için sol/sağ düğmelerini veya kaydırıcıyı kullanabilirsiniz (demo sayfasındaki farklı seçeneklere bakın). Proje açık
Bu yazıda, CSS Flexbox ve CSS dönüşümlerini kullanarak bir web sitesi için uyarlanabilir bir kaydırıcı oluşturmanın ne kadar basit bir şekilde mümkün olduğuna bakacağız.
Slider kaynak kodları ve demosu
GitHub'da ChiefSlider adında bir kaydırıcı projesi bulunmaktadır. Bu bağlantıyı kullanarak ona gidebilirsiniz.
Tek aktif slaytlı kaydırıcı (döngü yok):
Üç aktif slaytlı kaydırıcı (döngü yok):
Makaleleri döndürmek için kaydırıcıyı nasıl kullanabileceğinizi gösteren bir örnek:
ChiefSlider'ın avantajları
Bu kaydırıcının ana avantajlarını sıralayalım:
- her şeyden önce o öğelerin (öğelerin) klonlarını oluşturmazörneğin eklentilerde uygulandığı gibi döngüyü düzenlemek için BaykuşAtlıkarınca Ve kaygan;
- ikincisi, kütüphaneye bağlı değildir jQuery; sadece temizlemekle kalmıyor ek gereksinimler ama aynı zamanda kolaylaştırır;
- üçüncüsü, pratikte belgenin DOM'sinde herhangi bir değişiklik yapmaz; yaptığı tek şey kaydırıcı öğeleri için CSS dönüşüm değerlerini eklemek veya değiştirmek;
- dördüncüsü, yalnızca içerir minimum fonksiyon seti; göreve bağlı olarak ek işlevler eklenebilir;
- beşincisi uyarlanabilir, yani. herhangi bir web sitesinde kullanılabilir; Kaydırıcının uyarlanabilirliği CSS kullanılarak yapılandırılır;
- altıncısı, aktif öğelerin sayısı CSS kullanılarak ayarlanır; bu, bir aktif slaytla veya herhangi bir sayıda slaytla bir atlıkarınca oluşturmak için kullanılabileceği anlamına gelir.
ChiefSlider'ı yükleme
Kaydırıcının takılması 3 adımdan oluşur:
- ChiefSlider CSS'yi sayfaya veya sayfaya bağlı bir CSS dosyasına ekleyin;
- kaydırıcının HTML kodunu sayfada gerekli yere yerleştirin;
- JavaScript kodunu sayfaya veya sayfaya bağlı bir js dosyasına ekleyin.
CSS ve JavaScript kodunun en aza indirilmesi tavsiye edilir; bu işlem sayfanın daha hızlı yüklenmesini sağlayacaktır.
Bir web sitesi için basit bir kaydırıcı nasıl geliştirilir (döngü olmadan)
Kaydırıcı Oluşturma şefKaydırıcı HTML kodu, CSS ve JavaScript (jQuery olmadan) oluşturmayı içerecektir.
Kaydırıcı HTML kodu şefKaydırıcı:
Gördüğünüz gibi kaydırıcı çok basit bir HTML mimarisine sahip. Kaydırıcı sınıfına sahip ana blokla başlar. Bu blok 3 elementten oluşmaktadır.
İlk öğe .slider__wrapper'dır. .slider__item öğeleri (slaytlar) için sarmalayıcı görevi görür.
Kalan iki öğe (.slider__control) görsel olarak düğmeleri temsil eder. Slaytta gezinmek için kullanılacaklar, yani. önceki ve sonraki öğelere geçin.
ChiefSlider kaydırıcısının CSS kodu:
/* ANA STİLLER */ .slider ( konum: göreceli; taşma: gizli; ) .slider__wrapper ( display: flex; geçiş: dönüşüm 0,6 saniyelik kolaylık; /* 0,6 saniye cinsinden slayt değiştirme süresi */ ) .slider__item ( flex: 0 0 %50; /* etkin slaytların sayısını tanımlar (bu durumda 2 */ max-width: %50; /* etkin slaytların sayısını tanımlar (bu durumda 2 */ ) /* GERİ VE İLERİ DÜĞMELER İÇİN STİLLER * / .slider__control ( pozisyon: mutlak; görüntüleme: yok; üst: %50; transform: TranslateY(-%50); align-items: center; justify-content: center; text-align: center; width: 40px; /* düğme genişliği */ yükseklik: 50 piksel; /* düğme yüksekliği */ opaklık: .5; /* şeffaflık */ arka plan: #000; /* arka plan rengi */ ) .slider__control_show ( display: flex; ) .slider__control:hover, . Slider__control:focus ( metin dekorasyonu: yok; anahat: 0; opaklık: .9; /* şeffaflık */ ) .slider__control_left ( left: 0; ) .slider__control_right ( right: 0; ) .slider__control::before ( content: " "; ekran: satır içi blok;
genişlik: 20 piksel; /* simgenin genişliği (ok) */ yükseklik: 20px; /* simgenin yüksekliği (ok) */ arka plan: şeffaf, tekrarlanmayan merkez merkez; arka plan boyutu: %100 %100; ) .slider__control_left::before ( arka plan resmi: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns = "http://www.w3.org/2000/svg" fill = "%23fff" " viewBox = "0 0 8 8"%3E%3Cpath d = "M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z"/%3E%3C/svg%3E "); ) .slider__control_right::before ( arka plan resmi: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns="http://www.w3.org/2000/svg" fill= "%23fff" viewBox='0 0 8 8''%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z"/%3E%3C/svg%3E "); ) Gördüğünüz gibi kaydırıcının CSS kodu da çok karmaşık değil. Yapılandırma yapabileceğiniz temel tanımlar
dış görünüş kaydırıcı, yorumlarla birlikte sağlanır.:
Tanımlayan CSS kodu
aktif elemanların sayısı
/* etkin slayt sayısını tanımlar (bu durumda 2) */ flex: 0 0 50%; maksimum genişlik: %50; Bu kod, kaydırıcının etkin öğelerinin sayısını 2'ye ayarlar.Örneğin kaydırıcının olması için
bir aktif eleman
bu tanımların aşağıdaki şekilde değiştirilmesi gerekmektedir: /* etkin slayt sayısını tanımlar (bu durumda 1) */ flex: 0 0 100%; maksimum genişlik: %100; Yaratılış
uyarlanabilir kaydırıcı
Slider__item ( esnek: 0 0 100%; maksimum genişlik: %100; ) @media (min. genişlik: 980 piksel) ( .slider__item ( esnek: 0 0 25%; maksimum genişlik: %25; ))
ChiefSlider kaydırıcısının JavaScript kodu:
"katı kullanın"; var multiItemSlider = (function () ( dönüş işlevi (seçici) ( var _mainElement = document.querySelector(seçici), // ana blok öğesi _sliderWrapper = _mainElement.querySelector(".slider__wrapper"), // sarmalayıcı for.slider-item _sliderItems = _mainElement.querySelectorAll(".slider__item"), // öğeler (.slider-item) _sliderControls = _mainElement.querySelectorAll(".slider__control"), // kontroller _sliderControlLeft = _mainElement.querySelector(".slider__control_left"), // düğme "LEFT" _sliderControlRight = _mainElement.querySelector(".slider__control_right"), // düğme "SAĞ" _wrapperWidth = parseFloat(getComputedStyle(_sliderWrapper).width), // sarmalayıcı genişliği _itemWidth = parseFloat(getComputedStyle(_sliderItems).width), / / bir elemanın genişliği _positionLeftItem = 0, // sol aktif elemanın konumu _transform = 0, // dönüşüm değeri.slider_wrapper _step = _itemWidth / _wrapperWidth * 100, // adım boyutu (dönüştürme için) _items = // dizisi; öğeler // _items dizisinin doldurulması _sliderItems.forEach(function (item, index) ( _items.push(( item: item, konum: index, transform: 0 ));<= position.getMin) { return; } if (!_sliderControlRight.classList.contains("slider__control_show")) { _sliderControlRight.classList.add("slider__control_show"); } if (_sliderControlLeft.classList.contains("slider__control_show") && _positionLeftItem - 1 <= position.getMin) { _sliderControlLeft.classList.remove("slider__control_show"); } _positionLeftItem--; _transform += _step; } _sliderWrapper.style.transform = "translateX(" + _transform + "%)"; } // обработчик события click для кнопок "назад" и "вперед" var _controlClick = function (e) { if (e.target.classList.contains("slider__control")) { e.preventDefault(); var direction = e.target.classList.contains("slider__control_right") ? "right" : "left"; _transformItem(direction); } }; var _setUpListeners = function () { // добавление к кнопкам "назад" и "вперед" обработчика _controlClick для события click _sliderControls.forEach(function (item) { item.addEventListener("click", _controlClick); }); } // инициализация _setUpListeners(); return { right: function () { // метод right _transformItem("right"); }, left: function () { // метод left _transformItem("left"); } } } }());
));
var konum = ( getMin: 0, getMax: _items.length - 1, ) var _transformItem = function (direction) ( if (direction === "right") ( if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) >= konum .getMax) ( return; ) if (!_sliderControlLeft.classList.contains("slider__control_show")) ( _sliderControlLeft.classList.add("slider__control_show"); ) if (_sliderControlRight.classList.contains("slider__control_show") && (_positionLeftItem + _wrapperWidth / _itemWidth) >= pozisyon.getMax) ( _sliderControlRight.classList.remove("slider__control_show"); ) _positionLeftItem++; _transform -= _step; if (yön === "sol") ( if (_positionLeftItem) JavaScript kodundaki ana eylem, _transformItem işlevi tarafından gerçekleştirilir. Bu işlev kendisine iletilen yöne bağlı olarak element.slider__wrapper'ı dönüştürür.
Kaydırıcı başlatılıyor
şu şekilde gerçekleştirildi:
Var kaydırıcı = multiItemSlider(".slider") Kaydırıcı demosu
Bunu yapmak için, mevcut konumunun ve dönüşümünün değerlerini her element.slider__item'e bağlamanız gerekir.
Bu eylemler en iyi şekilde _items dizisi kullanılarak gerçekleştirilebilir:
Var_items = ; // diziyi elements.slider__item ile doldurma _sliderItems.forEach(function (item, index) ( _items.push(( item: item, konum: index, transform: 0 )); ));
Ancak verileri yalnızca bir dizi kullanarak değil, örneğin veri niteliklerini kullanarak öğelerle ilişkilendirebilirsiniz. Ancak DOM işlemleri en yavaş ve en yoğun kaynak kullanan işlemlerdir ve başka bir şekilde yapılabilecekleri durumlarda önerilmezler.
Bir sonraki adım, .slider__item değerini minimum ve maksimum konumla hesaplamak için işlevler oluşturmaktır.
Var konumu = ( getItemMin: function () ( var indexItem = 0; _items.forEach(function (item, index) ( if (item.position)< _items.position) { indexItem = index;` } }); return indexItem; }, getItemMax: function () { var indexItem = 0; _items.forEach(function (item, index) { if (item.position >_items.position) ( indexItem = indeks; ) ));
indeksItem'i döndür;), getMin: function () ( return _items.position; ), getMax: function () ( return _items.position; )) Son Temel Adım yapılması gereken işlevi sonuçlandırmak _transformItem. Yani, öğenin konumunu değiştirecek kodu ekleyin.
.slider__item< position.getMin()) {
nextItem = position.getItemMax();
_items.position = position.getMin() - 1;
_items.transform -= _items.length * 100;
_items.item.style.transform = "translateX(" + _items.transform + "%)";
}
_transform += _step;
}
_sliderWrapper.style.transform = "translateX(" + _transform + "%)";
}
ve dönüşümünü gerçekleştirin.
Var _transformItem = function (direction) ( var nextItem; if (direction === "right") ( _positionLeftItem++; if ((_positionLeftItem + _wrapperWidth / _itemWidth - 1) > konum.getMax()) ( nextItem = konum.getItemMin() ; _items.position = konum.getMax() + 1; _items.transform += _items.length * 100; _step; ) if (yön === "sol") ( _positionLeftItem--; if (_positionLeftItem)
Aslında burada her şey basit.
Örneğin, bir sonraki slayda geçmek için, items dizisinde ilk önce konumu en sağdaki element.slider__item'den daha büyük olan bir öğe aranır. Dizide böyle bir öğe varsa, o zaman element.slider__wrapper'ın dönüşümü gerçekleştirilir (yani, algoritmada olduğu gibi döngü olmadan eylemler). Ama eğer öyle bir unsur yok, daha sonra transformasyon.slider__wrapper'a ek olarak bir dizi başka eylem gerçekleştirilir. İlk olarak, items dizisinde bir öğe aranır minimum konumlu. Bu eşyayı aldıktan sonra değeri mevcut sağ elemanın değerine + 1 eşit olacak bir konum ayarlanır, öyle bir yüzdeyle sonunda sona eriyor, yani. son öğeden sonra.
Önceki slayda geçmek için benzer eylemler gerçekleştirilir ancak ters yönde.
Ayrıca döngüsel kaydırıcı için Sol ve Sağ düğmelerin görünürlüğünü değiştirmenize gerek yoktur. Kaydırıcının bu sürümündeki bu düğmeler her zaman görüntülenecektir.
Bunu yapmak için ihtiyacınız var:
- Slider__control_show sınıfını "Sağ" kontrolden kaldırın;
- selector.slider__control için CSS'de display özelliği değerini flex olarak değiştirin.
Döngü ve otomatik slayt değiştirme özelliğine sahip bir kaydırıcı nasıl oluşturulur?
setInterval fonksiyonunu kullanarak otomatik slayt değişikliklerini belirli aralıklarla programlayabilirsiniz.
Var _cycle = fonksiyon (yön) ( if (!_config.isCycling) ( return; ) _interval = setInterval(function () ( _transformItem(yön); ), _config.interval); )
Bu örnekteki setInterval işlevi, _transformItem işlevini, _config.interval değişkeninin değerine eşit belirli aralıklarla çalıştıracaktır.
Ayrıca imleci kaydırıcının üzerine getirdiğinizde slaytların otomatik değişimine bir durak eklemeniz önerilir.
Bu işlevselliği aşağıdaki şekilde uygulayabilirsiniz:
If (_config.pause && _config.isCycling) ( _mainElement.addEventListener("mouseenter", function () ( clearInterval(_interval); )); _mainElement.addEventListener("mouseleave", function () ( clearInterval(_interval); _cycle( _config.direction);
Öğe kullanıcı tarafından görülemiyorsa otomatik slayt değişimi nasıl durdurulur?
İki durumda otomatik slayt değiştirmeyi devre dışı bırakmanız önerilir:
- (bu kaydırıcının bulunduğu) sayfa etkin olmadığında;
- kaydırıcı sayfanın görünürlük alanının dışında olduğunda.
İlk durum, görünürlük değişikliği olayı kullanılarak ele alınabilir.
Document.addEventListener("visibilitychange", _handleVisibilityChange, false);
Görünürlük değişikliği olay işleyicisinin işlevi:
// "Belge görünürlüğü değişiklikleri" olayının işlenmesi var _handleVisibilityChange = function () ( if (document.visibilityState === "hidden") ( clearInterval(_interval); ) else ( clearInterval(_interval); _cycle(_config.direction); ))
Bir öğenin görünürlüğünün hesaplanması _isElementVisible işlevi kullanılarak yapılabilir:
Function _isElementVisible(element) ( var rect = element.getBoundingClientRect(), vWidth = window.innerWidth || doc.documentElement.clientWidth, vHeight = window.innerHeight || doc.documentElement.clientHeight, elemFromPoint = function (x, y) ( return document.elementFromPoint(x, y); if (rect.right);< 0 || rect.bottom < 0 || rect.left >vGenişlik || rect.top > vHeight) ( return false; ) return (element.contains(elemFromPoint(rect.left, rect.top)) || element.contains(elemFromPoint(rect.right, rect.top)) || element.contains (elemFromPoint(rect.right, rect.bottom)) || element.contains(elemFromPoint(rect.left, rect.bottom))); )
Örneğin, _isElementVisible çağrısını _transformItem işlevinin başlangıcına yerleştirebilirsiniz. Kaydırıcı o anda görünümün dışındaysa, bu eylem otomatik slayt geçişini iptal edecektir.
Var _transformItem = fonksiyon (yön) ( var nextItem; if (!_isElementVisible(_mainElement)) ( return; ) //...
Tarayıcı penceresinin yeniden boyutlandırılmasına yanıt veren kaydırıcı
Uyarlanabilir kaydırıcının bu sürümü öncekilerden farklıdır, çünkü tarayıcı penceresini yeniden boyutlandırırken etkin öğelerin (slaytların) sayısını değiştirin. Kullanıcılar genellikle tarayıcılarını yeniden boyutlandırmazlar ancak bu yine de gerçekleşebilir.
Bu, resize olayı ve _states dizisi kullanılarak uygulanır. Dizi hesaplamalar için kullanılır. Kullanımı, gerekmediğinde kaydırıcıyı yeniden başlatmaktan kaçınmanıza olanak tanır.
Bir tanesi etkili yollar Bir web sitesi sayfasında kullanıcıların dikkatini çekmek, hareketli animasyonların oluşturulmasıdır. Animasyon öğeleri, kullanıcılara ürününüz hakkında daha net bilgi vermenize ve göstermenize yardımcı olur. Son zamanlarda, kayan paneller ve bir resmi kaydırırken veya tıklarken ortaya çıkan bir dizi başka efekt çok popüler hale geldi. Ayrıca kaydırıcılar, atlıkarıncalar ve açılır paneller olarak da bilinirler. Bu yazıda, yumuşak otomatik kaydırma efektine sahip uyarlanabilir bir atlıkarınca kaydırıcısı oluşturma hakkında konuşacağız.
Bugün internette bağlantıların yer aldığı yüzlerce inceleme var. hazır çözümler ancak çoğu, kaydırıcının performansını önemli ölçüde azaltan ve sitenin bir bütün olarak yüklenmesini yavaşlatan birçok kullanılmayan işlev içerir. Profesyonel web geliştiricileri her zaman, ek kitaplıklar ve eklentiler için giriş engeli düşük, yapılandırma açısından esnek yazılım ürünleri oluşturmaya çalışmışlardır. Bu nedenle betiğimiz böyle bir kaydırıcıyı düzenlemek için minimum gereksinimleri kullanıyor. İşlevsellik, geçiş aralığını, hızını ve ayrıca belirli bir slayt seçimini ayarlamanıza olanak tanır. Aşağıda kaydırıcının çalışmasını düzenleyen bir dizi değişken bulunmaktadır.
zaman Listesi- slayt değiştirme hızı
Zaman Görünümü- gösteri zamanı
RadyoBut- hızlı gezinme için slaytın altındaki düğmeler. Varsayılan değer true'dur, false değerini kullanırsanız düğmeler kaybolur.
Şimdi başlayalım! Bir dosya oluşturup açalım index.htm
Gördüğümüz gibi sunulan kodda karmaşık hiçbir şey yok, kaydırıcı-sarma tanımlar genel konum kaydırıcıyı ekranın ortasına hizalar. Parametre aktif slayt görüntünün boyutunu ve yüksekliğini uzunluğuna göre ayarlar. VE kaydırıcı yalnızca aktif resmi gösterir.
Şimdi bir dosya oluşturup açalım stil.css ve ihtiyacımız olan işaretlemeyi buraya yazın:
@import url("https://fonts.googleapis.com/css?family=Open+Sans|Roboto"); gövde ( renk: #4f4f5a; yazı tipi ailesi: "Roboto", sans-serif; yazı tipi boyutu: 16 piksel; dolgu: 0; kenar boşluğu: 0; ) #slider-wrap( maksimum genişlik: 800 piksel; kenar boşluğu: 0 otomatik; kenar boşluğu: 80 piksel; ) #active-slide ( genişlik: %100; görüntü: tablo; konum: göreceli; taşma: gizli; -webkit-user-select: yok; -moz-user-select: yok; -ms- kullanıcı seçimi: yok; -o-kullanıcı seçimi: yok; kullanıcı seçimi: yok; ; dolgu: 0; -webkit-geçiş: 1s; -webkit-geçiş-zamanlama-işlevi: giriş-çıkış kolaylığı; giriş-çıkış kolaylığı) .slide( genişlik: calc(100%/); 4); liste stili: yok; görüntü: satır içi; kayan nokta: sol; ) .slide img ( genişlik: 100%; ) .Radio-But( border-top:10px; text-align:center; ) .ctrl-select ( kenar boşluğu:2 piksel; görüntüleme:satır içi blok; genişlik:16 piksel; yükseklik:16 piksel; taşma: gizli; metin girintisi:-9999 piksel; arka plan:url(radioBg.png) orta alt tekrarlama yok; ) .Radio-But .ctrl-select:hover ( imleç:işaretçi; arka plan konumu:orta merkez; ) .Radio-But .ctrl-select.active ( arka plan konumu:orta üst; ) #prewbutton, #nextbutton ( ekran :blok; yükseklik:%100; taşma:gizli; arka plan: url("arrowBg.png") sol orta opaklık:0,5; anahat:yok !önemli ) #prewbutton nextbutton ( right:10px; arka plan:url(arrowBg.png) sağ orta tekrarlama yok; ) #prewbutton:hover, # nextbutton:hover ( opacity:1; )
Stil özelliğinde kaydırıcı-sarma yaz Genişlik– resimlerinizin maksimum uzunluğu.
Stil özelliğinde #slider ( genişlik: hesapla(100% * 4); ) Ve .slide ( genişlik: calc(100%/4); ) kaydırıcınızdaki görsellerin sayısını belirtin. Örneğimizde 4 tane var.
İleri/geri okları kaydırıcınızın görünürlüğünü engelliyorsa görünmez hale getirilebilir ve üzerlerine geldiğinizde görünürler. Bunu yapmak için parametrelerde hazırla ama Ve sonrakiAma opacity özelliğini 0 olarak ayarlayın.
Şimdi dosyamızı oluşturup açalım Slider.js, kaydırıcı kodunu içerecektir. JQuery kütüphanesini eklemeyi unutmayın.
$(document).ready(function () ( var timeList = 700; var TimeView = 5000; var RadioBut = true; var SlideNum = 1; var SlideTime; SlideCount = $("#slider .slide").length; var animSlide = function(arrow)( clearTimeout(slideTime); if(arrow == "sonraki")( if(slideNum == SlideCount) ( SlideNum=1; ) else(slideNum++) TranslateWidth = -$("#active-slide") .width() * (slideNum - 1); $("#slider").css(("transform": "translate(" +translateWidth + "px, 0)") else if(arrow == " prew) ") ( if(slideNum == 1) ( SlideNum=slideCount; ) else(slideNum-=1) TranslateWidth = -$("#active-slide").width() * (slideNum - 1); $(" # Slider").css(("transform": "translate(" + TranslateWidth + "px, 0)")); )else( SlideNum = ok; TranslateWidth = -$("#active-slide").width( ) * (slideNum -1); $("#slider").css(("transform": "translate(" +translateWidth + "px, 0)")); $(".ctrl-select.active" ). RemoveClass("aktif"); $(".ctrl-select").eq(slideNum - 1).addClass("aktif" ) if(RadioBut)( var $linkArrow = $("<>").prependTo("#active-slide"); $("#nextbutton").click(function())( animSlide("sonraki"); return false; )) $("#prewbutton").click( function ()( animSlide("prew"); return false; )) ) var adderSpan = ""; $(".slide").each(function(index) ( adderSpan += " " + dizin + ""; }); $("
) )); $(".slide").hover().css("imleç", "işaretçi"); döndürücü(); ));
İşlev
Zaman durmaz ve onunla birlikte ilerler. Bu durum interneti de etkiledi. Web sitelerinin görünümünün nasıl değiştiğini zaten görebilirsiniz; uyarlanabilir tasarım özellikle popülerdir. Ve bu bağlamda, pek çok yenisi ortaya çıktı uyarlanabilir jquery kaydırıcıları, galeriler, karuseller veya benzeri eklentiler.
1. Duyarlı Yatay Gönderiler Kaydırıcısı
Ayrıntılı kurulum talimatlarını içeren uyarlanabilir yatay karusel. Basit bir tarzda yapılmıştır, ancak kendinize uyacak şekilde şekillendirebilirsiniz.
2. Glide.js'deki kaydırıcı
Bu kaydırıcı herhangi bir web sitesi için uygundur. Glide.js'yi şununla kullanır: açık kaynak. 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 3 boyutlu efektinin yanı sıra rastgele görünümdeki farklı animasyonlardır.
4. HTML5 tuvalini kullanan kaydırıcı
Etkileşimli parçacıklara sahip çok güzel ve etkileyici bir kaydırıcı. HTML5 canvas kullanılarak yapıldı,
5. Görüntü Dönüştürme Kaydırıcısı
Geçiş efektli kaydırıcı (Bir nesneden diğerine yumuşak dönüşüm). Bu örnekte kaydırıcı, bir web geliştiricisinin veya web stüdyosunun portföy biçimindeki portföyü için çok uygundur.
6. Dairesel kaydırıcı
Görüntüyü çevirme efektine sahip daire şeklinde kaydırıcı.
7. Arka planı bulanık olan kaydırıcı
Geçiş ve arka plan bulanıklığı özelliğine sahip uyarlanabilir kaydırıcı.
8. Duyarlı moda kaydırıcısı
Basit, hafif ve duyarlı web sitesi kaydırıcısı.
9. Dilim Kutusu - jQuery 3D görüntü kaydırıcısı(GÜNCELLENDİ)
Slicebox kaydırıcısının düzeltmeler ve yeni özelliklerle 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 JQuery eklentisi. Yeni görselleri ve bunların geçişlerini seçici olarak görüntüleyebildiğimiz için bu, bir web sitesinde arka plan veya dekoratif öğe olarak iyi görünebilir. Eklentinin çeşitli versiyonları mevcuttur.
11.Flex kaydırıcı
Web siteniz için evrensel ücretsiz bir eklenti. Bu eklenti çeşitli kaydırıcı ve atlıkarınca seçenekleriyle gelir.
12. Fotoğraf çerçevesi
Fotorama evrensel bir eklentidir. Birçok ayarı var, her şey hızlı ve kolay çalışıyor ve slaytları tam ekranda görüntüleyebilirsiniz. Kaydırıcı hem sabit boyutta hem de uyarlanabilir olarak, küçük resimlerle veya bunlar olmadan, dairesel kaydırmayla veya dairesel kaydırma olmadan ve çok daha fazlasında kullanılabilir.
Not:Kaydırıcıyı birkaç kez yükledim ve bence en iyilerinden biri
13. Küçük resimlerle birlikte ücretsiz ve uyarlanabilir 3D kaydırıcı galerisi.
Deneysel galeri kaydırıcısı 3DPanel Düzeni bir ızgara ve ilginç animasyon efektleriyle.
14. CSS3'teki kaydırıcı
Uyarlanabilir kaydırıcı, içeriğin düzgün görünümü ve ışık animasyonu ile css3 kullanılarak yapılmıştır.
15. WOW Kaydırıcısı
Vay Kaydırıcısı inanılmaz görsel efektlere sahip bir görüntü kaydırıcısıdır.
17. Elastik
Tam duyarlılığa ve slayt küçük resimlerine sahip elastik kaydırıcı.
18. Yarık
Bu, CSS3 animasyonunu kullanan tam ekran duyarlı bir kaydırıcıdır. Kaydırıcı iki versiyonda yapılmıştır. Animasyon oldukça alışılmadık ve güzel bir şekilde yapılıyor.
19. Uyarlanabilir fotoğraf galerisi artı
Resim yükleme özelliğine sahip basit bir ücretsiz galeri kaydırıcısı.
20. WordPress için Duyarlı Kaydırıcı
WP için uyarlanabilir ücretsiz kaydırıcı.
21. Paralaks İçerik Kaydırıcısı
Paralaks efektli kaydırıcı ve CSS3 kullanılarak her öğenin kontrolü.
22. Müzik bağlantılı kaydırıcı
JPlayer açık kaynak kodunu 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'yi temel alır ve bu nedenle slaytlarınıza bazı ilginç 3D efektler eklemenizi sağlar.
24. Hızlı Vurgulu Slayt Gösterisi
Hızlı slayt geçişli slayt gösterisi. Fareyle üzerine gelindiğinde slaytlar açılır.
25. CSS3 ile Görüntü Akordeon
CSS3 kullanarak görüntü akordeon.
26. Bir Dokunuşla Optimize Edilmiş Galeri Eklentisi
Bu, dokunmatik cihazlar için optimize edilmiş duyarlı bir galeridir.
27. 3D Galeri
3D Duvar Galerisi- 3D efektinin görülebileceği Safari tarayıcısı için oluşturulmuştur. Başka bir tarayıcıdan bakarsanız işlevsellik iyi olacaktır ancak 3D efekti görünmeyecektir.
28. Sayfalandırmalı kaydırıcı
JQuery UI kaydırıcısını kullanarak sayfalandırmaya sahip duyarlı kaydırıcı. Buradaki fikir basit bir gezinme konsepti kullanmaktır. Tüm görüntüleri geri sarmak veya slayt slayt geçiş yapmak mümkündür.
29.jQuery ile Görüntü Montajı
Görüntüleri ekran genişliğine göre otomatik olarak düzenleyin. Bir portföy web sitesi geliştirirken çok faydalı bir şey.
30. 3D Galeri
CSS3 ve jQuery kullanan basit bir 3 boyutlu dairesel kaydırıcı.
31. CSS3 ve jQuery kullanılarak 3D efektli tam ekran modu
Güzel bir geçişle görüntüleri tam ekran görüntüleme yeteneğine sahip bir kaydırıcı.
Yararlı olabilir:
- Moskova bölgesindeki gençler için kamp, Moskova bölgesindeki en iyi çocuk kampları.
-
Fotoğraf 1 için başlık -
Fotoğraf 2 için başlık -
Fotoğraf 3 için başlık
Kaydırma kaydırıcısı (atlıkarınca)
Her zaman olduğu gibi, bir sorun açıklamasıyla başlayalım: bu sefer, kaydırma efektini kullanarak görüntüleri kaydıracak bir kaydırıcı oluşturmamız gerekiyor. Doğal olarak gezinme düğmelerine sahip olmalı ve fare imleci atlıkarınca alanındaysa animasyon durmalıdır.
Gezinme düğmeleri için önceki örnektekiyle aynı görseli kullanacağız:
Bu sefer html işaretlemesini biraz karmaşıklaştıracağız - yalnızca resimleri değil, resimlere ek olarak metin içeren blokları da kaydıracağız. Başka bir değişiklik kaydırma düğmelerini etkileyecektir. Ayrıca bunları önceki örnekte yaptığımız gibi js kullanmadan doğrudan işaretlemeye ekleyeceğiz. İşte sonunda elde edeceğiniz şey:
Tüm yapıyı sınıfla ortak bir kaba yerleştiriyoruz carousel_wrap. Öğeleri kullanarak düğmeler tasarlıyoruz açıklık. Sınıflı konteyner görsel_blok slaydın içeriğinin görüntüleneceği bir pencere görevi görecek ve slaytların kendilerinin (bunları numarasız bir liste şeklinde düzenleyeceğiz) birbiri ardına yerleştirilmesi gerekecektir. Elbette element sayısında kısıtlamalar var LI HAYIR.
Görünümü css kullanarak tasarlayalım:
Carousel_wrap ( kenar boşluğu: 50 piksel otomatik; genişlik: 700 piksel; konum: göreceli; ) .visual_block ( kenar boşluğu: 0 otomatik; konum: göreceli; taşma: gizli; ) .visual_block ul ( konum: göreceli; ) .visual_block ul, .visual_block li ( float: left; ) .carousel_wrap span.next, .carousel_wrap span.prev ( kenar boşluğu:-20px; genişlik:15px; yükseklik:26px; görüntüleme:blok; metin girintisi:-9999px; taşma:gizli; imleç:işaretçi ; arka plan:url(slider2_arrow.png) tekrarlama yok; üst:%50; ) .carousel_wrap span.next ( sağ:0; arka plan konumu:-15px 0; ) .carousel_wrap span.next:hover ( arka plan konumu: -15px -26px; .carousel_wrap span.prev:hover ( arka plan konumu:0 -26px; )
Js kodunu yazmaya başlayabilirsiniz. Bunun nasıl yapılabileceğini düşünelim.
Şimdi tüm unsurlar LI birbirinin altında bulunur. Planımızı uygulamak için bunları tek sıra halinde hizalamamız, bloğun genişliğini ayarlamamız gerekiyor görsel_blok bir slaydın genişliğine eşit olacak şekilde ayarlayın (bu durumda yalnızca bir öğe görüntülenecektir - diğerleri kırpılacaktır) ve slaytların belirli aralıklarla aynı genişliğe kaymasını sağlayın. Tüm blokların boyutlarının dinamik olarak hesaplanması en uygunudur. jQuery bunu çeşitli şekillerde yapar. Bizim durumumuz için yöntemleri kullanacağız. dış Genişlik () Ve dış Yükseklik (). Bu yöntemler, seçilen öğenin boyutlarını tüm dolgularla birlikte döndürecektir. Ve tabii ki değerlerle çalışmayı kolaylaştırmak için onları değişkenlere kaydedeceğiz. Hadi başlayalım.
Öncelikle sarmalayıcı blokların değişkenlerini tanımlayalım.
Var elWrap = $("div.carousel_wrap"), görsel = $("div.visual_block") carousel = görsel.children("ul");
Sonra değişkenleri ekleyelim görünür(görüntülenen blokların sayısını içinde saklayacağız - bizim durumumuzda 1'dir), öğe Genişliği, öğe Yüksekliği Ve öğelerToplam(buraya bir slaydın genişliğini, yüksekliğini ve toplam sayısını koyuyoruz).
Var elWrap = $(".carousel_wrap"), görsel = $(".visual_block"), atlıkarınca = görsel.children("ul"), görünür = 1, itemWidth = carousel.children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length;
Artık gerekli konteyner boyutlarını kolayca hesaplayabiliriz görsel_blok, görsel_blok ul ve onlara gerekli değerleri atayın:
Visual.css(("genişlik": görünür * itemWidth + "px", "height" : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "left": 0));
Tasarım elde edildi gerekli tür ama yine de çalışmıyor. Slaytları hareket ettirmeniz gerekiyor (sol diyelim). Yöntemi kullanarak bunu yapalım canlandırmak bu elemanı dengeleyecek UL Sola.
Carousel.animate((sol: -itemWidth), 500);
Burada yöntemi uyguladık canlandırmak bloğa UL ve parametrelerde bloğun sol kenara göre taşınması gerektiğini belirttiler görsel_blok değişkenin değerine eşit bir mesafeye öğe Genişliği bir süre için 500 ml. Bloğun doğru yöne gitmesi için değişken öğe Genişliği negatif bir değere ayarlayın. Ne yazık ki bu kayıt istenilen sonucu elde edemedi. Tek başardığımız yer değiştirme UL nispeten görsel_blok sadece bir kez. Önemli değil, aynı eylemi birden çok kez tekrarlayarak hileler yaptık (önceki örneği hatırlayın). Bu sefer de aynısını yapalım. Kaydımızı “paketleyeceğimiz” ve yöntemi kullanarak çağıracağımız bir fonksiyon oluşturalım. setIntervalörneğin her üç saniyede bir.
Function changeLeft () ( carousel.animate((left: -itemWidth), 500); ) setInterval(changeLeft, 3000);
Tekrar başarısızlık - yer değiştirme UL hala bir kez oluyor. Bu anlaşılabilir bir durum. Elemanın taşınması gerektiğini belirttik. öğe Genişliği, görev tamamlanır ve başka hiçbir şey olmaz. İşleve yapılan sonraki çağrılar boş olarak ateşlenir. Peki ya zorlarsan UL geri gitmek? Daha sonra fonksiyon her çağrıldığında eleman başlangıç konumunda olacaktır. Hadi deneyelim. Öğeyi çalıştıktan sonra geri döndürmemiz gerekiyor canlandırmak. Bu yüzden ona üçüncü parametre olarak geri çağırma adı verilen işlevi vereceğiz. UL orijinal konumuna getirin.
Function changeLeft () ( carousel.animate((left: -itemWidth), 500, function() ( carousel.css(("left": 0 )); )); ) setInterval(changeLeft, 3000);
Sonuca bakalım. İlk bakışta bundan bir daha iyi bir şey çıkmamış gibi görünebilir. Her üç saniyede bir ilk slayt sola doğru hareket ediyor, yerini ikinciye bırakıyor ve hemen geri dönüyor... Tam bir başarısızlık.
Aslında bu doğru değil. Geri çağırma işlevinde yalnızca birkaç eylem daha yapmamız gerekiyor, yani ilk öğeyi (gizli olan) klonlayın ve klonu atlıkarıncanın en sonuna yerleştirin, ardından bu öğeyi atlıkarıncanın başlangıcında kaldırın ve ancak o zaman geri dönmek UL yerinde. Planlarımızı uygulayalım.
Function changeLeft () ( var item = carousel.children().eq(0); carousel.animate((left: -itemWidth), 500, function() ( item.clone().appendTo(carousel); item.remove (); carousel.css(("sol": 0 )); setInterval(changeLeft, 3000);
İşlevde değişiklikSol bir değişken bildirmek öğeİlk slaydı saklayacağımız yer. Daha sonra geri çağırma işlevinde slaydı klonlarız, klonu atlıkarıncanın sonuna taşırız ve öğenin kendisini sileriz. Sonuç olarak tam bir başarı bizi bekliyor. Otomatik kaydırmayı başlattık. Artık kodun tamamı şöyle görünüyor:
$(document).ready(function())( var elWrap = $(".carousel_wrap"), görsel = $(".visual_block"), carousel = görsel.children("ul"), görünür = 1, itemWidth = carousel .children().outerWidth(), itemHeight = carousel.children().outerHeight(), itemsTotal = carousel.children().length; görsel.css(("width": görünür * itemWidth + "px", " height " : itemHeight)); carousel.css(("width": itemsTotal * itemWidth, "left": 0)); function changeLeft () ( var item = carousel.children().eq(0); carousel.animate ( (left: -itemWidth), 500, function() ( item.clone().appendTo(carousel); item.remove(); carousel.css(("left": 0 )); ) ) setInterval(changeLeft) , 3000);
Bitmiş kodu indirinBir sonraki makalede gezinme düğmelerini çalıştırarak atlıkarınca kaydırıcısı üzerindeki çalışmayı bitireceğiz.
