Javascript shablonlari yordamida slayd-shou yarating. Fotolaboratoriya. Slidr boshqaruvlari

Slayd-shou yaratish dasturlari haqida umumiy ma'lumot Veb-sayt uchun slayd-shou yaratish

Veb-saytga joylashtirish uchun slayd-shou yaratishda tayyor dasturiy echimlardan foydalanish yaxshidir. Menimcha, eng yaxshi va eng oson variant jQuery-dan foydalanish, maxsus bepul skriptlar kutubxonasi (kichik JavaScript dasturlari). Oldingi maqolalarda ushbu ajoyib veb-ishlab chiqish vositasi haqida allaqachon gaplashilgan. Masalan, Fotogalereya maqolasiga qarang jQuery- oddiy va chiroyli! . Endi jQuery-dan foydalanib, saytda slayd-shou yaratamiz, slayder deb ataladi.

Buning uchun AQShning Oregon shtatidagi Portlend shahridagi “The Brigade” dizayn studiyasining texnik direktori dasturchi Neytan Searles tomonidan yaratilgan Slides plaginidan foydalanamiz. Uning yana bir ishlanmasi onlayn-do'kon uchun fotogalereya maqolasida tasvirlangan.

Slides plaginini o'rnatish oson, slayd-shouda tasvirlarni o'zgartirish uchun bir nechta variant mavjud va ko'pincha sayt sarlavhasi uchun ishlatiladi. Ushbu slayderning standart sozlamalar bilan qanday ishlashiga misol rasmda ko'rsatilgan:

Slayd-shouni o'rnatish Slaydlar

Har doimgidek, avval saytda skriptlar papkasini yarating. Keyin arxivni yuklab olishingiz va uni yaratilgan papkaga ochishingiz kerak. U ikkita jquery-1.8.3.min.js va jquery.cycle.all.min.js skriptlarini o'z ichiga oladi.

Keyinchalik, teg ichidagi sahifa sarlavhasiga... biz skriptlarga yo'lni ko'rsatadigan quyidagi qatorlarni va slayd-shou parametrlarini belgilaydigan kichik JavaScript-ni kiritamiz:

$(".slaydshou").cycle((
fx: "fade"
});
});

.slideshow(
kengligi: 200px;
balandligi: 135px;
chegara: avtomatik;
}

Ko'rib turganingizdek, oddiy CSS qoidasi ham mavjud bo'lib, unda kelajakdagi slayd-shou tasvirlari uchun oyna hajmini belgilashingiz kerak (kenglik - balandlik). Tabiiyki, barcha tasvirlar bir xil o'lchamda bo'lishi kerak. Agar xohlasangiz, slayd-shou rasmlaringiz uchun chegaralar, fonlar, to'ldirish va boshqa elementlarni qo'shish orqali CSS parametrlarini kengaytirishingiz mumkin. Bunday holda, siz umumiy o'lchamni, ya'ni rasmni va siz o'rnatgan uzunlik va kenglik bo'ylab chekinish va chegaralarni ko'rsatishingiz kerak.

Muhim eslatma: Agar sizning saytingiz bir nechta jQuery plaginlaridan foydalansa, jquery.js faylini (afzalroq eng so'nggi versiya) bir necha marta yuklab olmaslik uchun uni ildiz papkasiga ko'chirish qulayroqdir. Bunday holda, unga kirish liniyasi barcha plaginlar uchun bir xil ko'rinadi. Xususan, bizning misolimiz uchun shunday bo'ladi:

Ular bir-biriga zid bo'lmasligi uchun bir sahifada jQuery ning bir nechta turli versiyalaridan foydalanish tavsiya etilmaydi. Shu bilan birga, plaginlarning jQuery-ning o'rnatilgan versiyasi bilan ishlashini tekshiring, chunki barcha versiyalar bir-birini almashtirib bo'lmaydi.

Oxirgi qadam rasmlarni sahifaga joylashtirishdir. Bu erda ham hamma narsa oddiy. Tasvirlarni teg yoki kenglik va balandlikni belgilash imkonini beruvchi boshqa teg ichiga joylashtiring va uning sinfini belgilang="slayd-shou" . Misol uchun, slayderning HTML kodi quyidagicha ko'rinadi:

Ayni paytda slayd-shouni yaratish deyarli tugallandi va uni brauzerda sahifangizni ochish orqali ko'rishingiz mumkin.

Slayd-shou parametrlarini sozlash Slaydlar

Yaratilgan slayd-shouda siz sahifa sarlavhasida joylashtirilgan javascriptni o'zgartirib, freymlar orasidagi o'tishning har xil turlarini o'rnatishingiz mumkin. Bundan tashqari, skriptdagi sync:false qatorini sync:true bilan almashtirib, tasvirlarni o'zgartirishda bo'sh joyni olib tashlashingiz mumkin.

Tasvirlarni ko'rsatish muddati vaqt tugash parametri bilan, tezlik esa tezlik parametri bilan boshqariladi. Misol tariqasida, bu erda bir nechta umumiy slayd-shou variantlari va sahifa sarlavhasiga kiritilishi kerak bo'lgan tegishli skriptlar mavjud.

1. Eritma (bizning misolimiz): $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "fade", //o'tish turi tezlik: 1000 , //tasvirni o'zgartirish tezligi kutish vaqti: 1000 // ramka davomiyligi }); });
2. Aralashtirish: $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "aralash", sinxronlash: noto'g'ri, Tezlik: 500 kutish vaqti: 5000 }); });
3. Kattalashtirish: $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "kattalashtirish", sinxronlash: noto'g'ri }); });
4. X yoki Y o'qiga aylantiring: $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "pardaX", // Y o'qi bo'ylab aylanish uchun - pardaY sinxronlash: noto'g'ri }); });
5. Vertikal ravishda yig'ish: $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "turnDown", // yo'nalishni yuqoriga burish, chapga burish, o'ngga aylantirish mumkin sinxronlash: rost }); });
6. O'tkazish (ofset): $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx:"scrollDown", // ofset yo'nalishini o'rnatish mumkin scrollUp, scrollLeft, scrollRight sinxronlash: rost }); });
7. O'ngga o'ting: $(hujjat).ready(funksiya() ( $(".slaydshou").cycle(( fx: "qopqoq }); });

Ba'zan siz ushbu maqolada bo'lgani kabi, saytning bir sahifasida bir nechta slayd-shou variantlarini joylashtirishingiz kerak. Buni amalga oshirish uchun $(".slideshow").cycle(((yuqoridagi jadvaldagi kodga qarang)) qatoridagi har bir variant uchun har xil sinflarni ko'rsatish kifoya va har bir sinf uchun oyna o'lchamlarini belgilashni unutmang. CSS da.

Agar slaydlarda faqat rasmlar bo'lsa, siz strukturani biroz o'zgartirishingiz mumkin:

Oldingi Keyingi

Alt atributiga mazmunli qiymat qo'shishni unutmang.

Sahifa havolalaridan foydalanish uchun siz quyidagilarni qilishingiz mumkin:

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

Oldingi Keyingi 1 2 3

"Ma'lumotlar" atributlaridan foydalanishga e'tibor bering - ba'zi slayd-shoular rasmlarni fon sifatida qo'shishi mumkin va bu atributlar skriptda fon va slaydni ulash joylari sifatida ishlatiladi.

Ro'yxatlardan foydalanish Semantik jihatdan to'g'ri yondashuv ro'yxat elementlarini slayd sifatida ishlatishdir. Bunday holda, struktura quyidagicha bo'ladi:

Agar slaydlar tartibi aniq belgilangan bo'lsa (masalan, taqdimotda), siz raqamlangan ro'yxatlardan foydalanishingiz mumkin.

CSS Quyidagi tuzilmadan boshlaylik:

Oldingi Keyingi

Chunki Slayd-shou o'ngdan chapga yo'naltirilganligi sababli, tashqi idish o'zgarmas o'lchamga ega bo'ladi va ichki idish kengroq bo'ladi, chunki u barcha slaydlarni o'z ichiga oladi. Birinchi slayd ko'rinadi. Bu overflow orqali o'rnatiladi:

Slayder (kengligi: 1024px; toʻldirilishi: yashirin; ) .slayder-oʻrash (kengligi: 9999px; balandlik: 683px; joylashuvi: nisbiy; oʻtish: chapga 500ms chiziqli; )

Ichki o'rash uslublari quyidagilarni o'z ichiga oladi:

Katta kenglik
- belgilangan balandlik, maksimal slayd balandligi
- pozitsiya: nisbiy, bu sizga slayd harakatini yaratishga imkon beradi
- CSS-ga o'tish chapga, bu harakatni silliq qiladi. Oddiylik uchun biz barcha prefikslarni kiritmadik. Buning uchun CSS transformatsiyalaridan (tarjima bilan birga) ham foydalanishingiz mumkin.

Slaydlarda ularni bir qatorga qo'yish uchun float atributi mavjud. Ular JSda ularning chap ofsetini olishingiz uchun nisbatan joylashtirilgan. Biz uni surma effektini yaratish uchun ishlatamiz.

Slayd (suzuvchi: chap; joylashuvi: nisbiy; kenglik: 1024px; balandlik: 683px; )

Biz ma'lum bir kenglikni o'rnatgan bo'lsak-da, skriptda biz slaydlar sonini slayd kengligiga ko'paytirish orqali o'zgartirishimiz mumkin. Sizga qanday kenglik kerakligini hech qachon bilmaysiz.

Navigatsiya “Oldingi” va “Keyingi” tugmalari orqali amalga oshiriladi. Biz ularning standart uslublarini tiklaymiz va o'z uslubimizni tayinlaymiz:

Slider-nav (balandligi: 40px; eni: 100%; yuqori cheti: 1,5em; ) .slider-nav tugmasi (chegara: yoʻq; displey: blok; kenglik: 40px; balandlik: 40px; kursor: koʻrsatgich; matn-chekintisi : -9999em; fon rangi: shaffof; fon-takrorlash: takrorlanmaslik; ) .slider-nav tugmasi.slayder-oldingi ( float: chap; fon-rasm: url(oldingi.png); ) .slider-navigatsiya tugmasi .slider-keyingi ( float: o'ngda; fon-tasvir: url(keyingi.png); )

Tugmalar o'rniga sahifa havolalaridan foydalanganda siz quyidagi uslublarni yaratishingiz mumkin:

Slider-nav (matnni tekislash: markaz; chet-usti: 1,5em;) .slider-nav a (displey: inline-blok; matnni bezash: yo'q; chegara: 1px qattiq #ddd; rang: #444; eni: 2em; balandlik: 2em; chiziq balandligi: 2; matnni tekislash: markazga; ) .slider-nav a.current (chegara rangi: #000; rang: #000; shrift-og‘irligi: qalin; )

Ushbu sinflar skriptdan dinamik ravishda tayinlanadi.

Ushbu yondashuv surma effekti uchun javob beradi. Agar biz pasayish effektiga erishmoqchi bo'lsak, uslublarni o'zgartirishimiz kerak, chunki float slaydlar orasiga gorizontal to'ldirishni qo'shadi. Ya'ni, bizga bir qatorda slaydlar kerak emas - bizga slaydlar "to'plami" kerak:

Slayder (kenglik: 1024px; chekka: 2em auto; ) .slider-wrapper (kenglik: 100%; balandlik: 683px; joy: nisbiy; /* Mutlaq joylashish uchun kontekst yaratadi */ ) .slide ( pozitsiya: mutlaq; /* Barcha slaydlarning mutlaq joylashuvi */ kengligi: 100%; balandlik: 100%; shaffoflik: 0; /* Barcha slaydlar yashirin */ o'tish: shaffoflik 500 ms chiziqli; ) /* Dastlab faqat birinchisi ko'rinadi */ .slider- o'rash >
Slaydlarni yashirish uchun biz shaffoflik xususiyatidan foydalanamiz, chunki ekranni o'qiydiganlar displeyga ega bo'lgan elementlarning mazmunini o'tkazib yuborishadi: none (CSS in Action: Ko'rinmas kontent Faqat Screen Reader foydalanuvchilari uchun).

CSS-ning kontekstli joylashuvi tufayli biz slaydlarning "stekini" yaratdik, manbadagi oxirgi slayd boshqalarning oldida. Lekin bu bizga kerak emas. Slaydlar tartibini saqlash uchun birinchisidan tashqari barcha slaydlarni yashirishimiz kerak.

JS joriy slaydning shaffoflik xususiyati qiymatini o'zgartirib, qolganlari uchun bu qiymatni nolga qaytaradigan CSS o'tish usulidan foydalanadi.

JavaScript kodi Sahifalarsiz slayd-shou sahifalashsiz slayd-shou “Keyingi” va “Oldingi” tugmachalarini bosish orqali ishlaydi. Ularni oshirish va kamaytirish operatorlari sifatida qarash mumkin. Har doim tugmachalarni bosganingizda ko'paytiriladigan yoki kamaytiriladigan ko'rsatkich (yoki kursor) mavjud. Uning dastlabki qiymati 0 ga teng, maqsad esa massiv elementlari tanlanganidek joriy slaydni tanlashdir.

Shunday qilib, biz birinchi marta "Keyingi" tugmasini bosganimizda, ko'rsatkich 1 ga ortadi va biz ikkinchi slaydni olamiz. Oldingi tugmani bosish orqali biz ko'rsatkichni qisqartiramiz va birinchi slaydni olamiz. Va hokazo.

Joriy slaydni olish uchun ko'rsatgich bilan birga jQuery ning .eq() usulidan foydalanamiz. Sof JSda u quyidagicha ko'rinadi:

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

Esda tuting - NodeList indekslarni xuddi massiv kabi ishlatadi. Joriy slaydni tanlashning yana bir usuli - CSS3 selektorlari:

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

CSS3:nth-child() selektori 1 dan boshlanadigan elementlarni sanaydi, shuning uchun siz ko'rsatgichga 1 qo'shishingiz kerak. Slaydni tanlagandan so'ng, uning asosiy konteynerini o'ngdan chapga siljitish kerak. JQuery'da siz .animate() usulidan foydalanishingiz mumkin:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) ( opsiyalar = $.extend(( oʻram: ".slider-wrapper", slaydlar: ".slide", //... tezlik: 500, yumshatish : "chiziqli" ), variantlar); var slideTo = funktsiya (slayd, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( chap) : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Oddiy JSda .animate() usuli yo'q, shuning uchun biz CSS o'tishlaridan foydalanamiz:

Slayder-o'rash (pozitsiya: nisbiy; // zarur o'tish: chap 500ms chiziqli; )

Endi chap xususiyatni uslub ob'ekti orqali dinamik ravishda o'zgartirishingiz mumkin:

Endi biz har bir boshqaruv uchun klik hodisasini yaratishimiz kerak. JQuery'da siz .on() usulidan foydalanishingiz mumkin va sof JSda addEventListener() usulidan foydalanishingiz mumkin.

Shuningdek, ko'rsatgich ro'yxat chegaralariga yetib bormaganligini tekshirishingiz kerak - "Oldingi" uchun 0 va "Keyingi" uchun slaydlarning umumiy soni. Har bir holatda siz tegishli tugmani yashirishingiz kerak:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) ( opsiya = $.extend(( oʻram: ".slider-wrapper", slaydlar: ".slider", oldingi: ".slider-oldingi", keyingi : ".slider-next", //... tezlik: 500, yumshatish: "chiziqli" ), variantlar); var slideTo = funktsiya (slide, element) ( var $currentSlide = $(options.slides, element). eq(slide); $(options.wrapper, element).animate(( chap: - $currentSlide.position().left ), options.speed, options.easing); ); this.each(function()() qaytaring var $element = $(bu), $oldingi = $(options.previous, $element), $keyingi = $(options.keyingi, $element), indeks = 0, jami = $(options.slides).uzunlik; $next.on("click", function() ( index++; $previous.show(); if(index == jami - 1) ( index = jami - 1; $next.hide(); ) slideTo(index, $element); )); $previous.on("klik", function() ( index--; $next.show(); if(index == 0) (index = 0; $previous.hide(); ) slideTo(indeks, $element); ); )); ); ))(jQuery);

Va sof JSda u shunday ko'rinadi:

Funktsiya Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = (init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper) "); this.slides = this.el.querySelectorAll(".slide"); this.previous = this.el.querySelector(".slider-previous"); this.next = this.el.querySelector(".slider -next"); this.index = 0; this.total = this.slides.length; this.actions(); ), _slideTo: function(pointer) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), amallar: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. displey = "blok"; if(self.index == self.jami - 1) ( self.index = self.jami - 1; self.next.style.display = "yo'q"; ) self._slideTo(self.index ); ), noto‘g‘ri); self.previous.addEventListener("klik", function() ( self.index--; self.next.style.display = "blok"; if(self.index == 0) ( self .index = 0;self.previous.style.display = "yo'q"; ) self._slideTo(self.index); ), noto'g'ri); ));

Sahifali slayd-shou Ushbu turdagi slayd-shouda har bir havola bitta slayd uchun javob beradi, shuning uchun indeksga ehtiyoj qolmaydi. Animatsiyalar o'zgarmaydi; foydalanuvchining slaydlar bo'ylab harakatlanish usuli. JQuery uchun biz quyidagi kodga ega bo'lamiz:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) ( opsiyalar = $.extend(( oʻram: ".slider-wrapper", slaydlar: ".slide", nav: ".slider-nav", tezlik : 500, yumshatish: "chiziqli" ), variantlar); var slideTo = funktsiya (slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $(options.wrapper, element). animate(( chap: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(this), $navigationLinks = $( "a", options.nav); $navigationLinks.on("klik", funksiya(e) ( e.preventDefault(); var $a = $(bu), $slide = $($a.attr("href" ")); slideTo($slide, $element); $a.addClass("joriy").siblings(). removeClass("joriy"); )); )); ))(jQuery);

Bunday holda, har bir langar ma'lum bir slaydning identifikatoriga mos keladi. Sof JSda siz uni ham, NodeList ichidagi slaydlarning raqamli indeksini saqlaydigan ma'lumotlar atributidan ham foydalanishingiz mumkin:

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

IE10 dan boshlab sinflarni classList orqali boshqarishingiz mumkin:

Link.classList.add("joriy");

Va IE11 bilan ma'lumotlar atributlarini ma'lumotlar to'plami xususiyati orqali olish mumkin:

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

Boshqaruv elementlari bilan sahifalangan slayd-shoular Ushbu slayd-shoular kodga biroz murakkablik beradi - siz indeks va sahifa xeshlaridan foydalanishni birlashtirishingiz kerak. Ya'ni, joriy slayd ham ko'rsatgich o'rnini, ham havolalar orqali tanlangan slaydni hisobga olgan holda tanlanishi kerak.

Bu DOMdagi har bir havolaning raqam indeksi orqali sinxronlashtirilishi mumkin. Bitta havola - bitta slayd, shuning uchun ularning indekslari 0, 1, 2 va hokazo bo'ladi.

JQuery da kod quyidagicha bo'ladi:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) (variantlar = $.extend(( //... pagination: ".slider-pagination", //... ), variantlar); $. fn.slideshow.index = 0; this.each(function() qaytaring (var $element = $(bu), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("klik", funksiya(e) ( e.preventDefault(); var $a = $(bu), elemIndex = $a.index(); // DOM raqamli indeksi $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == jami - 1) ( $.fn.slideshow.index = jami - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. indeks, $element); $a.addClass("joriy"). siblings().removeClass("joriy"); )); )); ); //... ))(jQuery);

Kursorning ko'rinishi o'zgarganini darhol ko'rishingiz mumkin - indeks endi slayd-shou ob'ektining mulki sifatida e'lon qilinadi. Shunday qilib, jQuery-da qayta qo'ng'iroqlar orqali yaratilishi mumkin bo'lgan muammolardan qochamiz. Kursor endi hamma joyda, hatto plagin nom maydonidan tashqarida ham mavjud, chunki u slayd-shou obyektining umumiy mulki sifatida e'lon qilingan.

.index() usuli har bir havolaning raqamli indeksini beradi.

Sof JSda bunday usul yo'q, shuning uchun ma'lumotlar atributlaridan foydalanish osonroq:

Endi biz protseduralarimizni havolalar bilan bog'lashimiz va biz yaratgan ma'lumotlar atributlaridan foydalanishimiz mumkin:

Amallar: function() ( var self = this; //... for(var i = 0; i< self.navigationLinks.length; ++i) { var a = self.navigationLinks[i]; a.addEventListener("click", function(e) { e.preventDefault(); var n = parseInt(this.getAttribute("data-index"), 10); // Или var n = parseInt(this.dataset.index, 10); self.index = n; if(self.index == 0) { self.index = 0; self.previous.style.display = "none"; } if(self.index >0) ( self.previous.style.display = "blok"; ) if(self.index == self.jami - 1) ( self.index = self.jami - 1; self.next.style.display = "yo'q. "; ) else ( self.next.style.display = "blok"; ) self._slideTo(self.index); self._highlightCurrentLink(bu); ), noto'g'ri); ))

O'lchovlarni tushunish Keling, quyidagi CSS qoidasiga qaytaylik:

Slayder oʻrami (kengligi: 9999px; balandlik: 683px; joylashuvi: nisbiy; oʻtish: chap 500ms chiziqli; )

Agar bizda juda ko'p slaydlar bo'lsa, unda 9999 etarli bo'lmasligi mumkin. Har bir slaydning kengligi va slaydlar sonidan kelib chiqib, tezlikda slaydlar uchun o'lchamlarni moslashtirishingiz kerak.

jQuery'da hamma narsa oddiy:

// Toʻliq kenglikdagi slayd-shou this.each(function() ( var $element = $(bu), jami = $(options.slides).length; //... $(options.slides, $element ).width qaytaradi. ($(window).width()); $(options.wrapper, $element).width($(window).width() * jami); //... ));

Oynaning kengligini oling va har bir slaydning kengligini o'rnating. Ichki o'rashning umumiy kengligi oynaning kengligi va slaydlar sonini ko'paytirish orqali olinadi.

// Ruxsat etilgan kenglikdagi slayd-shou this.each(function() qaytaradi ( var $element = $(bu), jami = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * jami); //... ));

Bu erda boshlang'ich kenglik har bir slaydning kengligiga o'rnatiladi. Siz shunchaki o'ramning umumiy kengligini belgilashingiz kerak.

Ichki idish endi etarlicha keng. Sof JSda bu taxminan bir xil tarzda amalga oshiriladi:

// To'liq kenglikdagi slayd-shou Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide "); //... this.total = this.slides.length; this.setDimensions(); this.actions(); ), setDimensions: function() ( var self = this; // Viewport kengligi var winWidth = oyna .innerWidth || document.documentElement.clientWidth || document.body.clientWidth; var wrapperWidth = winWidth * self.total; for(var i = 0; i)< self.total; ++i) { var slide = self.slides[i]; slide.style.width = winWidth + "px"; } self.wrapper.style.width = wrapperWidth + "px"; }, //... }; // Слайд-шоу фиксированной ширины Slideshow.prototype = { init: function() { this.wrapper = this.el.querySelector(".slider-wrapper"); this.slides = this.el.querySelectorAll(".slide"); //... this.total = this.slides.length; this.setDimensions(); this.actions(); }, setDimensions: function() { var self = this; var slideWidth = self.slides.offsetWidth; // Single slide"s width var wrapperWidth = slideWidth * self.total; self.wrapper.style.width = wrapperWidth + "px"; }, //... };

So'ndiruvchi effektlar Ko'pincha slayd-shoularda o'chirish effektlari qo'llaniladi. Joriy slayd yo'qoladi va keyingisi paydo bo'ladi. jQuery'da noaniqlik va displey xususiyatlari bilan ishlaydigan fadeIn() va fadeOut() usullari mavjud, shuning uchun animatsiya tugagandan so'ng element sahifadan o'chiriladi (displey: yo'q).

Sof JSda shaffoflik xususiyati bilan ishlash va CSS joylashishni aniqlash stekidan foydalanish yaxshidir. Keyin dastlab slayd ko'rinadi (shaffoflik: 1), qolganlari esa yashirin bo'ladi (shaffoflik: 0).

Quyidagi uslublar to'plami ushbu usulni ko'rsatadi:

Slayder (kengligi: 100%; toʻldirilishi: yashirin; joylashuvi: nisbiy; balandligi: 400px; ) .slider-oʻrash (kengligi: 100%; balandlik: 100%; joylashuvi: nisbiy; ) .slide ( pozitsiyasi: mutlaq; eni: 100 %; balandlik: 100%; shaffoflik: 0; ) .slider-wrapper > .slide:first-child ( shaffoflik: 1; )

Sof JSda siz har bir slaydning CSS o'tishini ro'yxatdan o'tkazishingiz kerak:

Slayd (suzuvchi: chap; pozitsiya: mutlaq; kenglik: 100%; balandlik: 100%; shaffoflik: 0; o'tish: shaffoflik 500ms chiziqli; )

JQuery bilan fadeIn() va fadeOut() usullaridan foydalanish uchun shaffoflik va displeyni o'zgartirishingiz kerak:

Slayd (suzuvchi: chap; joy: mutlaq; kenglik: 100%; balandlik: 100%; displey: yo‘q; ) .slider-wrapper > .slide:birinchi bola (displey: blok; )

jQuery-da kod quyidagicha:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) ( opsiya = $.extend(( oʻram: ".slider-wrapper", oldingi: ".slider-oldingi", keyingi: ".slider-keyingi" , slaydlar: ".slide", navbat: ".slider-nav", tezlik: 500, yengillashtirish: "chiziqli" ), variantlar); var slideTo = funktsiya (slayd, element) ( var $currentSlide = $(options.slides) , element).eq(slide); $currentSlide.animate(( shaffoflik: 1 ), options.speed, options.easing). siblings(options.slides).css("opacity", 0); ); //. ..); )))(jQuery);

Shaffoflikni jonlantirganda, qolgan slaydlar uchun ushbu xususiyatning qiymatlarini ham o'zgartirishingiz kerak.

JavaScript-da shunday bo'ladi:

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

Media elementlari: Video Biz videoni slayd-shouga qo'shishimiz mumkin. Mana Vimeo-dan video slayd-shou namunasi:

Videolar iframe orqali kiritilgan. Bu rasmdagi kabi almashtiriladigan inline-blokdir. O'zgartirilishi mumkin - chunki kontent tashqi manbadan olingan.

To'liq sahifali slayd-shou yaratish uchun siz uslublarni quyidagicha o'zgartirishingiz kerak:

Html, korpus ( hoshiya: 0; toʻldirish: 0; balandlik: 100%; min. balandlik: 100%; /* Balandlik butun sahifa boʻlishi kerak */ ) .slider (kenglik: 100%; toʻldirish: yashirin; balandlik: 100 %; min-balandligi: 100%; /* Balandlik va kenglikdan toʻliqgacha */ pozitsiyasi: mutlaq; /* mutlaq joylashishni aniqlash */ ) .slider-wrapper (kenglik: 100%; balandlik: 100%; /* balandlik va kenglikdan to'liq */ pozitsiyasi: nisbiy; ) .slide ( float: chap; pozitsiya: mutlaq; kenglik: 100%; balandlik: 100%; ) .slide iframe ( displey: blok; /* Blok elementi */ pozitsiyasi: mutlaq; /* Mutlaq joylashishni aniqlash */ kenglik: 100%; balandlik: 100%; /* to'liq balandlik va kenglik */ )

Avtomatik slayd-shou Avtomatik slayd-shoularda taymerlardan foydalaniladi. Har safar setInterval() taymer funksiyasi qayta chaqirilganda kursor 1 ga oshiriladi va shu bilan keyingi slayd tanlanadi.

Kursor slaydlarning maksimal soniga yetganda, uni qayta tiklash kerak.

Cheksiz slayd-shou foydalanuvchilar uchun tezda zerikarli bo'lib qoladi. Eng yaxshi amaliyot foydalanuvchi kursorni uning ustiga olib kelganida animatsiyani to‘xtatish va kursor uzoqlashganda davom ettirishdir.

(funktsiya($) ( $.fn.slideshow = funktsiya(variantlar) (variantlar = $.extend(( slaydlar: ".slide", tezlik: 3000, yengillashtirish: "chiziqli" ), variantlar); var timer = null; // Timer var index = 0; // Kursor var slideTo = funktsiya (slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( noaniqlik: 1 ), options.speed, options.easing). siblings(options.slides). css("opacity", 0); ); var autoSlide = function(element) ( // Ketma-ket taymerni ishga tushirish = setInterval ( function() ( index++; // Kursorni 1 ga oshiring if(index == $(options.slides, element).length) ( index = 0; // Kursorni tiklash ) slideTo(index, element); ), options.speed ); // method.animate() ); var startStop = funktsiya (element) ( element.hover(function() ( // Animatsiyani to'xtatish clearInterval(taymer); taymer = null; ), funktsiya () ( autoSlide(element); // Animatsiyani davom ettirish )); ); return this.each(function() ( var $element = $(this); autoSlide($element); startStop($element); ))) ); ))(jQuery);

.stop() usulining ikkala parametri ham rostga o'rnatiladi, chunki ketma-ketligimizdan animatsiya navbatini yaratishimiz shart emas.

Sof JSda kod oddiyroq bo'ladi. Biz har bir slayd uchun ma'lum muddatga CSS o'tishini ro'yxatdan o'tkazamiz:

Slayd (o'tish: shaffoflik 3s chiziqli; /* 3 soniya = 3000 millisekund */ )

Va kod shunday bo'ladi:

Klaviatura navigatsiyasi Kengaytirilgan slayd-shoulari klaviatura navigatsiyasini taklif qiladi, ya'ni. Tugmalarni bosib slaydlarni aylantiring. Biz uchun bu shunchaki tugmachalarni bosish hodisasini ro'yxatdan o'tkazishimiz kerakligini anglatadi.

Buning uchun hodisa obyektining keyCode xususiyatiga kiramiz. U bosilgan tugma kodini qaytaradi (kodlar ro'yxati).

Biz "Oldingi" va "Keyingi" tugmalariga biriktirgan voqealar endi "chap" va "o'ng" tugmachalariga biriktirilishi mumkin. jQuery:

$("body").on("keydown", funksiya(e) ( var code = e.keyCode; if(code == 39) ( // Chap strelka $next.trigger("click"); ) if( kod == 37) ( // O'ng strelka $previous.trigger("click"); ) ));

Sof JSda oddiy .trigger() usuli oʻrniga dispatchEvent() dan foydalanish kerak boʻladi:

Document.body.addEventListener("keydown", funktsiya(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // sichqonchani bosing if(code == 39) ( // Chap strelka o'zi .next.dispatchEvent(evt); ) if(kod == 37) ( // O'ng strelka self.previous.dispatchEvent(evt); ) ), false);

Yaxshi loyihalarda buni qilish odatiy hol emas. Biz ommaviy usulda aylantirishni ta'minlaydigan funksiyani aniqlashimiz va tugma bosilganda uni chaqirishimiz kerak. Agar ushbu funktsiyani amalga oshirish uchun dasturning boshqa qismi kerak bo'lsa, DOM hodisalarini taqlid qilishning hojati yo'q, lekin bu usulni shunchaki chaqirish mumkin edi.

Qayta qo'ng'iroqlar Ushbu amal bajarilganda bajariladigan har qanday slayd-shou amaliga ba'zi kodlarni biriktira olish yaxshi bo'lar edi. Bu qayta qo'ng'iroq qilish funktsiyalarining maqsadi - ular faqat ma'lum bir harakat sodir bo'lganda amalga oshiriladi. Aytaylik, slayd-shouda taglavhalar bor va ular sukut bo'yicha yashiringan. Animatsiya vaqtida biz joriy slayd uchun sarlavhani ko'rsatishimiz yoki hatto u bilan biror narsa qilishimiz kerak.

JQuery'da siz quyidagi kabi qayta qo'ng'iroqni yaratishingiz mumkin:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) (variantlar = $.extend(( //... qayta qoʻngʻiroq: function() () ), variantlar); var slideTo = funktsiya (slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( noaniqlik: 1 ), options.speed, options.easing, // Joriy slayd uchun qayta qoʻngʻiroq qilish options.callback($) currentSlide)).birodarlar(options.slides).css("shaffoflik", 0); ); //... ); ))(jQuery);

Bunday holda, qayta qo'ng'iroq qilish joriy slaydni argument sifatida qabul qiluvchi .animate() funksiyasi hisoblanadi. Buni qanday ishlatishingiz mumkin:

$(function() ( $("#main-slider").slideshow(( qayta qo'ng'iroq: function(slide) ( var $wrapper = slide.parent(); // Joriy sarlavhani ko'rsatadi va qolganlarini yashiradi $wrapper.find (" .slide-caption"). hide(); slide.find(".slide-caption").shou("sekin"); ) )); ));

Sof JSda:

(function() ( funktsiya Slayd-shou(element, qayta qo'ng'iroq) ( this.callback = qayta qo'ng'iroq || function()); // Bizning qayta qo'ng'iroqimiz this.el = document.querySelector(element); this.init(); ) Slayd-shou. prototip = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: function(slide) ( var self = bu; var currentSlide = self.slides; currentSlide.style.opacity = 1; for(var i = 0; i< self.slides.length; i++) { var slide = self.slides[i]; if(slide !== currentSlide) { slide.style.opacity = 0; } } setTimeout(self.callback(currentSlide), 500); // Вызывает функцию по окончанию перехода } }; // })();

Qayta chaqiruv funksiyasi konstruktorning ikkinchi parametri sifatida aniqlanadi. Siz undan shunday foydalanishingiz mumkin:

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Joriy sarlavhani ko'rsatadi va boshqalarni yashiradi var allSlides = wrapper. querySelectorAll(".slide"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("visible"); for(var i = 0; i< allSlides.length; ++i) { var sld = allSlides[i]; var cpt = sld.querySelector(".slide-caption"); if(sld !== slide) { cpt.classList.remove("visible"); } } }); });

Tashqi API'lar Hozircha bizning ish stsenariyimiz oddiy: barcha slaydlar allaqachon hujjatda. Agar biz unga tashqaridan (YouTube, Vimeo, Flickr) ma'lumotlarni kiritishimiz kerak bo'lsa, biz tashqi kontentni qabul qilganimizda slaydlarni tezda to'ldirishimiz kerak.

Uchinchi tomon serveridan javob darhol bo'lmasligi mumkinligi sababli, jarayon davom etayotganini ko'rsatish uchun yuklash animatsiyasini kiritishingiz kerak:

Oldingi Keyingi

Bu gif yoki sof CSS animatsiyasi bo'lishi mumkin:

#spinner (chegara-radius: 50%; hoshiya: 2px qattiq #000; balandlik: 80px; kenglik: 80px; joylashuv: mutlaq; tepa: 50%; chap: 50%; chet: -40px 0 0 -40px; ) # spinner:after (kontent: ""; pozitsiya: mutlaq; fon rangi: #000; tepa: 2px; chap: 48%; balandlik: 38px; kenglik: 2px; chegara radiusi: 5px; -webkit-transform-origin: 50% 97%; transform-kelib chiqishi: 50% 97%; -webkit-animatsiya: burchakli 1s chiziqli cheksiz; animatsiya: burchakli 1s chiziqli cheksiz; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(transform:rotate(0deg);) 100%(transform:rotate(360deg);) ) #spinner:oldin ( kontent: ""; pozitsiya: mutlaq; fon rangi: #000; tepa: 6px; chap: 48%; balandlik: 35px; kenglik: 2px; chegara radiusi: 5px; -webkit-transform-original: 50% 94% ; transform-original: 50% 94%; -webkit-animation: ptangular 6s chiziqli cheksiz; animatsiya: ptangular 6s chiziqli cheksiz; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(transform:aylantirish(0deg);) 100%(transform:aylantirish(360deg);) )

Qadamlar quyidagicha bo'ladi:
- tashqaridan ma'lumotlarni so'rash
- yuklovchini yashirish
- ma'lumotlarni tahlil qilish
- HTML yaratish
- slayd-shouni ko'rsatish
- jarayon slayd-shoulari

Aytaylik, biz YouTube’dan foydalanuvchining eng oxirgi videolarini tanlaymiz. jQuery:

(funksiya($) ( $.fn.slideshow = funktsiya(variantlar) (variantlar = $.extend(( oʻram: ".slider-wrapper", //... yuklovchi: "#spinner", //... chegara: 5, foydalanuvchi nomi: "learncodeacademy" ), variantlar); //... var getVideos = function() ( // YouTube'dan videolarni olish var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, funktsiya(videos)) ( // Videoni JSON obyekti sifatida oling $(options.loader). hide( ); // Yuklovchini yashirish var yozuvlari = videos.feed.entry; var html = ""; for(var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } $(options.wrapper).html(html); // Выведем слайд-шоу }); }; return this.each(function() { //... getVideos(); // Обрабатываем слайд-шоу }); }; })(jQuery);

Sof JavaScript-da qo'shimcha qadam bor - JSON olish usulini yaratish:

Keyin protseduralar o'xshash:

(function() ( funksiya Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.wrapper = this.el.querySelector( ".slider-wrapper"); this.loader = this.el.querySelector("#spinner"); //... this.limit = 5; this.username = "learncodeacademy"; this.actions(); ) , _getJSON: funktsiya(url, qayta qo'ng'iroq) (qayta qo'ng'iroq = qayta qo'ng'iroq || funksiya(); var so'rov = yangi XMLHttpRequest(); request.open("GET", url, true); request.send(null); so'rov .onreadstatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON ob'ektini qayta chaqirish(ma'lumotlar); ) else ( konsol. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // YouTube videosini olish var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, function(videos)) ( // Videoni JSON obyekti sifatida oling var entry = videos.feed.entry ; var html = ""; self.loader.style.display = "yo'q"; // Yuklagichni yashirish (var i = 0; i< entries.length; ++i) { // Разбираем данные и строим строку HTML var entry = entries[i]; var idURL = entry.id.$t; var idVideo = idURL.replace("http://gdata.youtube.com/feeds/api/videos/", ""); var ytEmbedURL = "https://www.youtube.com/embed/" + idVideo + "?rel=0&showinfo=0&controls=0"; html += ""; html += ""; html += ""; } self.wrapper.innerHTML = html; // Выводим слайд-шоу }); }, actions: function() { var self = this; self.getVideos(); // Обрабатываем слайд-шоу } }; })(); Добавить метки