Javascript загваруудыг ашиглан слайд шоу үүсгэх. Гэрэл зургийн лаборатори. Slidr Controls

Слайд харуулах программуудын тойм Вэбсайтад зориулж слайд үзүүлэх

Вэбсайтад байршуулах слайд шоу үүсгэхдээ бэлэн програм хангамжийн шийдлүүдийг ашиглах нь зүйтэй. Миний бодлоор хамгийн сайн бөгөөд хялбар сонголт бол jQuery, тусгай үнэгүй скрипт номын сан (жижиг JavaScript програмууд) ашиглах явдал юм. Өмнөх нийтлэлүүд энэ гайхамшигтай вэб хөгжүүлэлтийн хэрэгслийн талаар аль хэдийн ярьсан. Жишээлбэл, Фото зургийн цомог нийтлэлийг үзнэ үү jQuery- энгийн бөгөөд үзэсгэлэнтэй! . Одоо jQuery программыг ашиглан слайдер гэгдэх сайт дээр слайд үзүүлье.

Үүнийг хийхийн тулд бид АНУ-ын Орегон мужийн Портланд хотын "The Brigade" дизайны студийн техникийн захирал программист Натан Сиарлесийн бүтээсэн Slides залгаасыг ашиглах болно. Түүний өөр нэг бүтээн байгуулалтыг онлайн дэлгүүрийн зургийн цомог нийтлэлд тайлбарласан болно.

Slides залгаасыг суулгахад хялбар, слайд шоу дахь зургийг өөрчлөх хэд хэдэн сонголттой бөгөөд сайтын толгой хэсэгт ихэвчлэн ашиглагддаг. Энэ гулсагч нь анхдагч тохиргоотой хэрхэн ажилладаг тухай жишээг зурагт үзүүлэв.

Слайд шоу суулгаж байна Слайд

Ердийнх шигээ эхлээд сайт дээр скрипт хавтас үүсгэ. Дараа нь та архивыг татаж аваад үүсгэсэн хавтсанд задлах хэрэгтэй. Энэ нь jquery-1.8.3.min.js болон jquery.cycle.all.min.js гэсэн хоёр скриптийг агуулна.

Дараа нь, шошгон доторх хуудасны гарчигт бид скриптүүдийн замыг зааж өгөх дараах мөрүүдийг оруулаад слайд шоуны параметрүүдийг тодорхойлсон жижиг JavaScript бичнэ.

$(".слайд харуулах").cycle((
fx: "бүдгэрэх"
});
});

.слайд шоу(
өргөн: 200px;
өндөр: 135px;
захын зай: автомат;
}

Таны харж байгаагаар ирээдүйн слайд шоуны зургийн цонхны хэмжээг (өргөн - өндөр) зааж өгөх энгийн CSS дүрэм байдаг. Мэдээжийн хэрэг, бүх зураг ижил хэмжээтэй байх ёстой. Хэрэв та хүсвэл слайд үзүүлэнгийн зургандаа хүрээ, дэвсгэр, дэвсгэр болон бусад элементүүдийг нэмж CSS-ийн сонголтыг өргөтгөж болно. Энэ тохиолдолд та нийт хэмжээг зааж өгөх ёстой, өөрөөр хэлбэл зураг дээр нэмсэн урт, өргөний дагуу догол, хүрээ зэргийг зааж өгөх ёстой.

Чухал тэмдэглэл:Хэрэв таны сайт хэд хэдэн jQuery залгаас ашигладаг бол jquery.js файлыг (хамгийн сүүлийн хувилбар нь илүү тохиромжтой) эх хавтас руу зөөж, хэд хэдэн удаа татаж авахгүй байх нь илүү тохиромжтой. Энэ тохиолдолд түүнд хандах мөр нь бүх залгаасуудад адилхан харагдах болно. Ялангуяа бидний жишээний хувьд дараах байдалтай байна.

Нэг хуудсан дээр jQuery-ийн хэд хэдэн өөр хувилбаруудыг ашиглахыг зөвлөдөггүй бөгөөд ингэснээр тэдгээр нь хоорондоо зөрчилдөхгүй. Үүний зэрэгцээ бүх хувилбаруудыг сольж болохгүй тул залгаасууд jQuery-ийн суулгасан хувилбартай ажиллаж байгаа эсэхийг шалгаарай.

Сүүлийн алхам бол зургуудыг хуудсан дээр байрлуулах явдал юм. Энд бас бүх зүйл энгийн. Зургуудыг шошго эсвэл өргөн ба өндрийг тохируулах боломжтой бусад шошгон дотор байрлуулж, түүний ангилалыг зааж өгнө = "slideshow" . Бидний жишээн дээр гулсагчийн HTML код дараах байдалтай байна.

Энэ үед слайд шоу бүтээх ажил бараг дуусч байгаа бөгөөд та өөрийн хуудсыг хөтөч дээр нээж үзэх боломжтой.

Слайд харуулах сонголтуудыг тохируулах Слайд

Үүсгэсэн слайд шоунд та хуудасны толгой хэсэгт байрлуулсан javascript-ийг өөрчилснөөр хүрээ хоорондын шилжилтийн янз бүрийн хэлбэрийг тохируулж болно. Нэмж дурдахад, скрипт дэх sync:false мөрийг sync:true гэж сольсноор та зургийг өөрчлөхдөө зайг арилгах боломжтой.

Зургийг харуулах үргэлжлэх хугацааг хугацаа дуусах параметрээр, хурдыг хурдны параметрээр хянадаг. Жишээлбэл, хуудасны толгой хэсэгт оруулах ёстой хэд хэдэн нийтлэг слайд харуулах сонголтууд болон холбогдох скриптүүдийг энд оруулав.

1. Татан буулгах (бидний жишээ): $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "бүдгэрэх", //шилжилтийн төрөл хурд: 1000 , //зураг өөрчлөх хурд завсарлага: 1000 //фрэймийн үргэлжлэх хугацаа }); });
2. Холих: $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "хослуулах", синхрончлол: худал, хурд: 500 Хугацаа: 5000 }); });
3. Томруулах: $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "томруулах", синхрончлол: худал }); });
4. X эсвэл Y тэнхлэгт эргүүлэх: $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "curtainX", // Y тэнхлэгийн дагуу эргүүлэхэд - curtainY синхрончлол: худал }); });
5. Босоо буулгах: $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "turnDown", // чиглэлийг эргүүлэх, зүүн тийш эргүүлэх, баруун тийш эргүүлэх зэргийг тохируулж болно синхрончлол: үнэн }); });
6. Гүйлгэх (офсет): $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx:"scrollDown", // офсет чиглэлийг гүйлгэх, гүйлгэх, зүүн тийш гүйлгэх зэргийг тохируулж болно. синхрончлол: үнэн }); });
7. Баруун тийш бүдгэрч: $(баримт бичиг).бэлэн(функц() ( $(".слайд харуулах").cycle(( fx: "хамгаалах }); });

Заримдаа та энэ нийтлэлд бичсэн шиг сайтын нэг хуудсан дээр хэд хэдэн слайд харуулах сонголтыг байрлуулах хэрэгтэй. Үүнийг хийхийн тулд та $(".slideshow").cycle(((дээрх хүснэгтийн кодыг үзнэ үү) мөрөнд сонголт тус бүрт өөр өөр анги зааж өгөх хэрэгтэй бөгөөд анги тус бүрийн цонхны хэмжээг зааж өгөхөө бүү мартаарай. CSS дээр.

Хэрэв слайд нь зөвхөн зураг агуулсан бол бүтцийг бага зэрэг өөрчилж болно.

Өмнөх Дараагийн

Alt шинж чанарт утга учиртай утгыг нэмэхээ бүү мартаарай.

Хуудасны холбоосыг ашиглахын тулд та дараахь зүйлийг хийж болно.

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

Өмнөх Дараагийн 1 2 3

"Өгөгдлийн" шинж чанаруудыг ашиглахыг анхаарна уу - зарим слайд шоунууд нь зургийг дэвсгэр болгон оруулах боломжтой бөгөөд эдгээр шинж чанаруудыг скриптэд дэвсгэр болон слайдыг холбох газар болгон ашиглах болно.

Жагсаалтыг ашиглах Утга зүйн хувьд зөв арга бол жагсаалтын зүйлсийг слайд болгон ашиглах явдал юм. Энэ тохиолдолд бүтэц нь дараах байдалтай байна.

Хэрэв слайдын дарааллыг сайн тодорхойлсон бол (жишээлбэл, үзүүлэн дээр) та дугаарласан жагсаалтыг ашиглаж болно.

CSS Дараах бүтцээс эхэлцгээе:

Өмнөх Дараагийн

Учир нь Слайд үзүүлбэр баруунаас зүүн тийш явагдах тул гаднах сав нь тогтмол хэмжээтэй байх ба дотор нь бүх слайдыг агуулж байгаа тул илүү өргөн байх болно. Эхний слайд харагдах болно. Үүнийг халих замаар тохируулна:

Слайдер (өргөн: 1024px; халих: нуугдмал; ) .гулсагч (өргөн: 9999px; өндөр: 683px; байрлал: харьцангуй; шилжилт: зүүн 500мс шугаман; )

Дотор боодлын хэв маяг нь:

Том өргөн
- тогтмол өндөр, гулсалтын хамгийн их өндөр
- байрлал: харьцангуй, энэ нь слайдын хөдөлгөөнийг үүсгэх боломжийг танд олгоно
- CSS шилжилт зүүн, энэ нь хөдөлгөөнийг жигд болгоно. Энгийн болгох үүднээс бид бүх угтваруудыг оруулаагүй болно. Үүний тулд та CSS хувиргалтыг (орчуулгын хамт) ашиглаж болно.

Слайдууд нь тэдгээрийг эгнээнд байрлуулахын тулд хөвөх шинж чанартай байдаг. Тэдгээр нь харьцангуй байрлалтай тул та JS-д зүүн зөрүүг авах боломжтой. Бид гулсах эффект үүсгэхийн тулд үүнийг ашигладаг.

Слайд (хөвөгч: зүүн; байрлал: харьцангуй; өргөн: 1024 пиксел; өндөр: 683 пиксел; )

Хэдийгээр бид тодорхой өргөнийг тохируулсан боловч скрипт дээр бид слайдын тоог слайдын өргөнөөр үржүүлж өөрчлөх боломжтой. Та ямар өргөн хэрэгтэй болохыг хэзээ ч мэдэхгүй.

Навигац нь "Өмнөх" ба "Дараах" товчлууруудаар хийгддэг. Бид тэдний өгөгдмөл хэв маягийг дахин тохируулж, өөрсдийнхөө хэв маягийг онооно:

Slider-nav (өндөр: 40px; өргөн: 100%; захын дээд: 1.5em; ) .slider-nav товчлуур (хүрээ: байхгүй; дэлгэц: блок; өргөн: 40px; өндөр: 40px; курсор: заагч; текстийн догол : -9999em; дэвсгэр өнгө: тунгалаг; дэвсгэр-давталт: давтахгүй; ) .гулсах-нав .slider-next ( хөвөх: баруун; дэвсгэр зураг: url(next.png); )

Товчлуурын оронд хуудасны холбоосыг ашиглахдаа та дараах хэв маягийг үүсгэж болно.

Slider-nav (текстийг зэрэгцүүлэх: голд; захын дээд хэсэг: 1.5em;) .slider-nav a (дэлгэц: шугаман блок; текстийн чимэглэл: байхгүй; хүрээ: 1px хатуу #ddd; өнгө: #444; өргөн: 2эм; өндөр: 2эм; мөрийн өндөр: 2; текстийг зэрэгцүүлэх: төвд; ) .slider-nav a.current (хүргийн өнгө: #000; өнгө: #000; үсгийн жин: тод; )

Эдгээр ангиудыг скриптээс динамик байдлаар хуваарилах болно.

Энэ арга нь гулсах эффектэд тохиромжтой. Хэрэв бид бүдгэрүүлэх нөлөө үзүүлэхийг хүсч байвал хөвөгч нь слайдуудын хооронд хэвтээ дэвсгэр нэмдэг тул хэв маягийг өөрчлөх хэрэгтэй. Өөрөөр хэлбэл, бидэнд нэг мөрөнд слайд хэрэггүй - бидэнд слайдын "багц" хэрэгтэй болно.

Slider ( өргөн: 1024px; маржин: 2em auto; ) .slider-wrapper ( өргөн: 100%; өндөр: 683px; байрлал: харьцангуй; /* Үнэмлэхүй байрлал тогтоох контекст үүсгэдэг */ ) .slide ( байрлал: үнэмлэхүй; /* Бүх слайдын үнэмлэхүй байрлал */ өргөн: 100%; өндөр: 100%; тунгалаг байдал: 0; /* Бүх слайдууд далд */ шилжилт: тунгалаг байдал 500 мс шугаман; ) /* Эхэндээ зөвхөн эхнийх нь харагдана */ .slider- боодол >
Дэлгэц уншигчид дэлгэцтэй элементүүдийн агуулгыг алгасах тул бид слайдыг нуухын тулд тунгалаг байдлын шинж чанарыг ашигладаг (CSS in Action: Зөвхөн дэлгэц уншигч хэрэглэгчдэд зориулсан үл үзэгдэх контентыг үзнэ үү).

CSS-ийн контекст байршлын ачаар бид слайдуудын "стек" үүсгэсэн бөгөөд эх сурвалжийн сүүлчийн слайд бусдын өмнө байна. Гэхдээ энэ нь бидэнд хэрэгтэй зүйл биш юм. Слайдын дарааллыг хадгалахын тулд эхнийхээс бусад бүх слайдыг нуух хэрэгтэй.

JS нь CSS шилжилтийг ашиглаж, одоогийн слайдын тунгалаг байдлын шинж чанарын утгыг өөрчилдөг бөгөөд бусад бүх утгыг тэг болгон тохируулдаг.

JavaScript код Хуудаслалгүй слайд шоу нь "Дараах" болон "Өмнөх" товчийг дарснаар ажилладаг. Тэдгээрийг нэмэгдүүлэх, багасгах операторууд гэж үзэж болно. Товчлуур дээр дарах болгонд ихсэх эсвэл багасгах заагч (эсвэл курсор) үргэлж байдаг. Үүний анхны утга нь 0 бөгөөд зорилго нь массивын элементүүдийг сонгосонтой адилаар одоогийн слайдыг сонгох явдал юм.

Тиймээс бид "Дараах" товчийг анх удаа дарахад заагч 1-ээр нэмэгдэж, хоёр дахь слайд гарч ирнэ. Өмнөх дээр дарснаар бид заагчийг багасгаж, эхний слайдыг авдаг. гэх мэт.

Заагчтай хамт бид одоогийн слайдыг авахын тулд jQuery-ийн .eq() аргыг ашигладаг. Цэвэр JS дээр энэ нь дараах байдалтай байна.

Функц Slideshow(element) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll(".slide") ; //... ), _slideTo: функц(заагч) ( var currentSlide = this.slides; //... ) );

Санаж байгаарай - NodeList нь массив шиг индексүүдийг ашигладаг. Одоогийн слайдыг сонгох өөр нэг арга бол CSS3 сонгогч юм.

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

CSS3:nth-child() сонгогч нь 1-ээс эхлэн элементүүдийг тоолох тул заагч дээр 1 нэмэх шаардлагатай. Слайдыг сонгосны дараа түүний эх савыг баруунаас зүүн тийш шилжүүлэх ёстой. jQuery дээр та .animate() аргыг ашиглаж болно:

(функц($) ( $.fn.slideshow = функц(сонголт) ( сонголтууд = $.extend(( боодол: ".slider-wrapper", слайд: ".slide", //... хурд: 500, хөнгөвчлөх : "шугаман" ), сонголтууд); var slideTo = функц(слайд, элемент) ( var $currentSlide = $(options.slides, element).eq(слайд); $(options.wrapper, element). animate(( зүүн) : - $currentSlide.position().left ), options.speed, options.easing); ); //... ); ))(jQuery);

Энгийн JS дээр .animate() арга байхгүй тул бид CSS шилжилтийг ашигладаг:

Slider-wrapper (байрлал: харьцангуй; // шаардлагатай шилжилт: зүүн 500ms шугаман; )

Одоо та зүүн талын шинж чанарыг загварын объектоор дамжуулан динамикаар өөрчилж болно:

Одоо бид хяналт бүрийн хувьд товшилтын үйл явдал үүсгэх хэрэгтэй. jQuery дээр та .on() аргыг, цэвэр JS дээр addEventListener() аргыг ашиглаж болно.

Та мөн заагч жагсаалтын хил хязгаарт хүрсэн эсэхийг шалгах хэрэгтэй - "Өмнөх" бол 0, "Дараах" слайдын нийт тоо. Аль ч тохиолдолд та тохирох товчлуурыг нуух хэрэгтэй.

(функц($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( боодол: ".slider-wrapper", слайд: ".slider", өмнөх: ".slider-previous", дараагийн : ".slider-next", //... хурд: 500, хөнгөвчлөх: "шугаман" ), сонголтууд); var slideTo = функц(слайд, элемент) ( var $currentSlide = $(options.slides, элемент). eq(слайд); $(options.wrapper, element).animate(( зүүн: - $currentSlide.position().left ), options.speed, options.easing); ); this.each(function()() буцаана. var $element = $(энэ), $previous = $(options.previous, $element), $next = $(options.next, $element), index = 0, нийт = $(Options.slides).length; $next.on("товшилт", функц() (index++; $previous.show(); if(индекс == нийт - 1) (индекс = нийт - 1; $next.hide(); ) slideTo(индекс, $element); )); $previous.on("дарна уу", функц() (индекс--; $next.show(); if(индекс == 0) (индекс = 0; $previous.hide(); ) slideTo(индекс, $элемент); )); )); ); ))(jQuery);

Цэвэр JS дээр энэ нь иймэрхүү харагдаж байна:

Slideshow(элемент) функц ( 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(заагч) ( var currentSlide = this.slides; this.wrapper.style.left = "-" + currentSlide.offsetLeft + "px"; ), үйлдэл: function() ( var self = this; self.next.addEventListener("click", function() ( self.index++; self.previous.style. дэлгэц = "блок"; if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "байхгүй"; ) self._slideTo(self.index) ); ), худал); self.previous.addEventListener("товшилт", функц() ( self.index--; self.next.style.display = "блок"; if(self.index == 0) ( өөрөө .index = 0;self.previous.style.display = "байхгүй"; ) self._slideTo(self.index); ), худал); ) );

Хуудастай слайд шоу Энэ төрлийн слайд шоунд холбоос бүр нэг слайдыг хариуцдаг тул индекс оруулах шаардлагагүй. Хөдөлгөөнт дүрс нь өөрчлөгддөггүй, хэрэглэгч слайдаар хөдөлдөг арга зам өөрчлөгддөг. jQuery-ийн хувьд бид дараах кодтой болно.

(функц($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( боодол: ".slider-wrapper", слайд: ".slide", nav: ".slider-nav", хурд : 500, хөнгөвчлөх: "шугаман" ), сонголтууд); var slideTo = функц(слайд, элемент) ( var $currentSlide = $(options.slides, element).eq(слайд); $(options.wrapper, element). animate(( зүүн: - $currentSlide.position().left ), options.speed, options.easing); ); return this.each(function() ( var $element = $(энэ), $navigationLinks = $( "a", options.nav); $navigationLinks.on("товшилт", функц(e) ( e.preventDefault(); var $a = $(энэ), $slide = $($a.attr("href) ")); slideTo($slide, $element); $a.addClass("одоогийн").siblings(). removeClass("одоогийн"); )); )); ))(jQuery);

Энэ тохиолдолд зангуу бүр нь тодорхой слайдын ID-тай тохирч байна. Цэвэр JS дээр та үүнийг болон NodeList дотор слайдуудын тоон индексийг хадгалдаг өгөгдлийн шинж чанарыг хоёуланг нь ашиглаж болно:

Slider(элемент) функц ( 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(); ), navigate: function() ( for (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-аас хойш та ангиудыг classList-ээр удирдаж болно:

Link.classList.add("одоогийн");

Мөн IE11-ийн тусламжтайгаар өгөгдлийн шинж чанаруудыг өгөгдлийн олонлогийн шинж чанараар дамжуулан авах боломжтой:

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

Удирдлага бүхий хуудастай слайд шоунууд Эдгээр слайдууд нь кодын зарим нарийн төвөгтэй байдлыг харуулдаг - та индекс болон хуудасны хэшийг хослуулах хэрэгтэй. Өөрөөр хэлбэл, одоогийн слайдыг заагчийн байрлал болон холбоосоор сонгосон слайд дээр үндэслэн сонгох ёстой.

Үүнийг DOM дахь холбоос бүрийн тооны индексээр дамжуулан синхрончилж болно. Нэг холбоос - нэг слайд тул тэдгээрийн индексүүд 0, 1, 2 гэх мэт байх болно.

jQuery дээр код дараах байдалтай байна.

(function($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( //... хуудаслалт: ".slider-pagination", //... ), сонголтууд); $. fn.slideshow.index = 0; this.each(function() буцаана ( var $element = $(энэ), //... $pagination = $(options.pagination, $element), $paginationLinks = $(" a", $pagination), //... $paginationLinks.on("дарна уу", функц(e) ( e.preventDefault(); var $a = $(энэ), elemIndex = $a.index(); // DOM тоон индекс $.fn.slideshow.index = elemIndex; if($.fn.slideshow.index > 0) ( $previous.show(); ) else ( $previous.hide(); ) if($. fn.slideshow.index == нийт - 1) ( $.fn.slideshow.index = нийт - 1; $next.hide(); ) else ( $next.show(); ) slideTo($.fn.slideshow. индекс, $элемент); $a.addClass("одоогийн"). siblings().removeClass("одоогийн"); )); )); ); //... ))(jQuery);

Та курсорын харагдах байдал өөрчлөгдсөнийг шууд харж болно - одоо индексийг слайд харуулах объектын өмч гэж зарласан. Ингэснээр бид jQuery-д дуудлага хийх замаар үүсгэж болох хамрах хүрээний асуудлаас зайлсхийх болно. Слайд харуулах объектын нийтийн өмч гэж зарласан тул курсорыг залгаасын нэрийн зайнаас гадна хаа сайгүй ашиглах боломжтой.

.index() арга нь холбоос бүрийн тоон индексийг өгдөг.

Цэвэр JS-д ийм арга байхгүй тул өгөгдлийн шинж чанаруудыг ашиглах нь илүү хялбар байдаг:

Одоо бид процедуруудаа лавлагаатай холбож, саяхан үүсгэсэн өгөгдлийн шинж чанаруудыг ашиглаж болно:

Үйлдэл: 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 = "block"; ) if(self.index == self.total - 1) ( self.index = self.total - 1; self.next.style.display = "байхгүй "; ) else ( self.next.style.display = "block"; ) self._slideTo(self.index); self._highlightCurrentLink(энэ); ), худал); ) )

Хэмжээг ойлгох нь Дараах CSS дүрэм рүү буцъя:

Slider-wrapper (өргөн: 9999px; өндөр: 683px; байрлал: харьцангуй; шилжилт: зүүн 500ms шугаман; )

Хэрэв бид олон слайдтай бол 9999 хангалттай биш байж магадгүй юм. Та слайд бүрийн өргөн болон слайдын тоо дээр үндэслэн слайдын хэмжээг тохируулах хэрэгтэй.

jQuery дээр энэ нь энгийн:

// Бүрэн өргөнтэй слайд шоуг буцаана this.each(function() ( var $element = $(энэ), нийт = $(options.slides).length; //... $(options.slides, $element ).width ($(цонх).өргөн()); $(options.wrapper, $element).өргөн($(цонх).өргөн() *нийт); //... ));

Цонхны өргөнийг аваад слайд бүрийн өргөнийг тохируулна уу. Дотор боодлын нийт өргөнийг цонхны өргөн болон слайдын тоог үржүүлэх замаар олж авна.

// Тогтмол өргөнтэй слайд шоуг буцаана this.each(function() ( var $element = $(энэ), нийт = $(options.slides).length; //... $(options.wrapper, $element) .width ($(options.slides).eq(0).width() * нийт); //... ));

Энд эхний өргөнийг слайд бүрийн өргөнөөр тохируулна. Та зүгээр л боодлын нийт өргөнийг тохируулах хэрэгтэй.

Одоо дотоод сав хангалттай өргөн байна. Цэвэр JS-д энэ нь ойролцоогоор ижил аргаар хийгддэг:

// Бүрэн өргөнтэй слайд шоу 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-ийн өргөн var winWidth = цонх .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"; }, //... };

Бүдгэрэх эффектүүд Слайд шоунд бүдгэрүүлэх эффектийг ихэвчлэн ашигладаг. Одоогийн слайд алга болж, дараагийнх нь гарч ирнэ. jQuery нь тунгалаг байдал болон дэлгэцийн шинж чанаруудтай хоёуланд нь ажилладаг fadeIn() болон fadeOut() аргуудтай тул хөдөлгөөнт дүрс дууссаны дараа элементийг хуудаснаас хасдаг (дэлгэц: байхгүй).

Цэвэр JS-д тунгалаг байдлын шинж чанартай ажиллаж, CSS байршлын стекийг ашиглах нь хамгийн сайн арга юм. Дараа нь эхлээд слайд харагдах болно (тунгалаг байдал: 1), бусад нь нуугдана (тунгалаг байдал: 0).

Дараах хэв маягийн багц нь энэ аргыг харуулж байна.

Slider ( өргөн: 100%; халих: далд; байрлал: харьцангуй; өндөр: 400px; ) .slider-wrapper ( өргөн: 100%; өндөр: 100%; байрлал: харьцангуй; ) .слайд ( байрлал: үнэмлэхүй; өргөн: 100 %; өндөр: 100%; тунгалаг байдал: 0; ) .slider-wrapper > .slide:first-child ( тунгалаг байдал: 1; )

Цэвэр JS дээр та слайд бүрийн CSS шилжилтийг бүртгүүлэх шаардлагатай.

Слайд (хөвөгч: зүүн; байрлал: үнэмлэхүй; өргөн: 100%; өндөр: 100%; тунгалаг байдал: 0; шилжилт: тунгалаг байдал 500 мс шугаман; )

jQuery-ийн тусламжтайгаар fadeIn() болон fadeOut() аргуудыг ашиглахын тулд тунгалаг байдал болон дэлгэцийг өөрчлөх шаардлагатай.

Слайд ( хөвөх: зүүн; байрлал: үнэмлэхүй; өргөн: 100%; өндөр: 100%; дэлгэц: байхгүй; ) .гулсагч-боодол > .слайд: анхны хүүхэд ( дэлгэц: блок; )

jQuery дээр код дараах байдалтай байна.

(функц($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( боодол: ".slider-wrapper", өмнөх: ".slider-previous", дараагийн: ".slider-next" , слайд: ".slide", nav: ".slider-nav", хурд: 500, хөнгөвчлөх: "шугаман" ), сонголтууд); var slideTo = функц(слайд, элемент) ( var $currentSlide = $(options.slides) , элемент).eq(слайд); $currentSlide. animate(( тунгалаг байдал: 1), сонголтууд.хурд, сонголтууд.хялбар). ..); ))(jQuery);

Тунгалаг байдлыг идэвхжүүлэхдээ үлдсэн слайдын хувьд энэ шинж чанарын утгыг өөрчлөх шаардлагатай.

JavaScript дээр энэ нь:

Slideshow.prototype = ( //... _slideTo: функц(слайд) ( 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; } } }, //... };

Медиа элементүүд: Видео Бид слайд шоунд видео оруулах боломжтой. Vimeo-ийн видео слайд шоуны жишээ энд байна:

Видеонуудыг iframe-ээр оруулсан болно. Энэ нь зурган дээрхтэй ижил сольж болох шугаман блок юм. Орлуулах боломжтой - агуулгыг гадны эх сурвалжаас авсан тул.

Бүтэн хуудас слайд үзүүлэхийн тулд та дараах байдлаар хэв маягийг өөрчлөх хэрэгтэй.

Html, их бие ( захын зай: 0; дэвсгэр: 0; өндөр: 100%; мин-өндөр: 100%; /* Өндөр нь хуудсыг бүхэлд нь харуулах ёстой */ ) .slider ( өргөн: 100%; халих: далд; өндөр: 100 %; мин-өндөр: 100%; /* Өндөр ба өргөнөөс бүрэн */ байрлал: үнэмлэхүй; /* Үнэмлэхүй байрлал */ ) .slider-wrapper (өргөн: 100%; өндөр: 100%; /* Өндөр ба өргөн хүртэл бүрэн */ байрлал: харьцангуй; ) .слайд ( хөвөх: зүүн; байрлал: үнэмлэхүй; өргөн: 100%; өндөр: 100%; ) .slide iframe ( дэлгэц: блок; /* Блок элемент */ байрлал: үнэмлэхүй; /* Үнэмлэхүй байрлал */ өргөн: 100%; өндөр: 100%; /* бүрэн өндөр ба өргөн */ )

Автомат слайд шоу Автомат слайд шоу нь таймер ашигладаг. setInterval() таймер функцийг буцаан дуудах бүрт курсор 1-ээр нэмэгдэх ба ингэснээр дараагийн слайдыг сонгох болно.

Курсор слайдын хамгийн их тоонд хүрэхэд түүнийг дахин тохируулах шаардлагатай.

Төгсгөлгүй слайд шоу нь хэрэглэгчдийн хувьд хурдан уйтгартай болдог. Хэрэглэгч түүн дээр гүйлгэх үед хөдөлгөөнт дүрсийг зогсоож, курсор холдох үед үргэлжлүүлэх нь хамгийн сайн арга юм.

(function($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( слайд: ".slide", хурд: 3000, хөнгөвчлөх: "шугаман" ), сонголтууд); var timer = null; // Timer var index = 0; // Cursor var slideTo = function(slide, element) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide.stop(true, true). animate (( тунгалаг байдал: 1 ), сонголтууд. хурд, сонголтууд. хөнгөвчлөх). ах дүүс(сонголтууд.слайд). css("Тунгалаг байдал", 0); ); var autoSlide = функц(элемент) ( // Дарааллын таймерыг эхлүүлэх = setInterval ( function() ( index++; // Курсорыг 1-ээр нэмэгдүүлэх if(index == $(options.slides, element).length) ( index = 0; // Курсорыг дахин тохируулах ) slideTo(индекс, элемент); ), options.speed ); // method.animate() ); var startStop = function(element) ( element.hover(function() ( // Хөдөлгөөнт дүрсийг зогсоох clearInterval(таймер); timer = null; ), функц () ( autoSlide(элемент); // Хөдөлгөөнийг үргэлжлүүлэх )); ); this.each(function() буцаана ( var $element = $(энэ); autoSlide($элемент); startStop($элемент); ))) ); ))(jQuery);

.stop() аргын хоёр параметр хоёулаа үнэн гэж тохируулагдсан, учир нь Бид өөрсдийн дарааллаас хөдөлгөөнт дараалал үүсгэх шаардлагагүй.

Цэвэр JS дээр код нь илүү хялбар болдог. Бид слайд бүрт CSS шилжилтийг тодорхой хугацаанд бүртгэдэг.

Слайд (шилжилт: тунгалаг байдал 3с шугаман; /* 3 секунд = 3000 миллисекунд */ )

Мөн код нь иймэрхүү байх болно:

(функц() ( функц Slideshow(элемент) ( this.el = document.querySelector(element); this.init(); ) Slideshow.prototype = ( init: function() ( this.slides = this.el.querySelectorAll() ".slide"); this.index = 0; // Курсор this.timer = null; // Timer this.action(); this.stopStart(); ), _slideTo: function(slide) ( var currentSlide = this. слайд; 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; } } }, action: function() { var self = this; // Initializes the sequence self.timer = setInterval(function() { self.index++; // Увеличим курсор на 1 if(self.index == self.slides.length) { self.index = 0; // Обнулим курсор } self._slideTo(self.index); }, 3000); // Тот же интервал, что и у перехода CSS }, stopStart: function() { var self = this; // Останавливаем анимацию self.el.addEventListener("mouseover", function() { clearInterval(self.timer); self.timer = null; }, false); // Возобновляем анимацию self.el.addEventListener("mouseout", function() { self.action(); }, false); } }; })();

Keyboard Navigation Нарийвчилсан слайд шоунууд нь гарын навигацыг санал болгодог, i.e. Товчлуур дээр дарж слайдуудаар гүйлгэ. Бидний хувьд энэ нь товчлуур дарах үйл явдлыг бүртгэх шаардлагатай гэсэн үг юм.

Үүнийг хийхийн тулд бид үйл явдлын объектын keyCode шинж чанарт хандах болно. Энэ нь дарагдсан товчлуурын кодыг буцаана (кодын жагсаалт).

Бидний "Өмнөх" болон "Дараах" товчлууруудад хавсаргасан үйл явдлуудыг одоо "зүүн" болон "баруун" товчлууруудад хавсаргах боломжтой. jQuery:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39)) ( // Зүүн сум $next.trigger("click"); ) if( код == 37) ( // Баруун сум $previous.trigger("click"); ) ));

Цэвэр JS дээр энгийн .trigger() аргын оронд dispatchEvent()-г ашиглах хэрэгтэй болно:

Document.body.addEventListener("keydown", функц(e) ( var code = e.keyCode; var evt = new MouseEvent("click"); // хулганы товчийг дарна уу (код == 39) ( // Зүүн сум өөрөө .next.dispatchEvent(evt); ) if(код == 37) ( // Баруун сум self.previous.dispatchEvent(evt); ) ), худал);

Зохистой төслүүдэд үүнийг хийх нь заншилгүй байдаг. Бид нийтийн аргаар эргүүлэх функцийг тодорхойлж, товчлуур дээр дарахад үүнийг дуудах хэрэгтэй болно. Хэрэв програмын өөр хэсэг нь энэ функцийг хэрэгжүүлэх шаардлагатай бол DOM үйл явдлуудыг дуурайх шаардлагагүй, харин энэ аргыг дуудаж болно.

Буцах дуудлага Тухайн үйлдлийг гүйцэтгэх үед хийгдэх слайд үзүүлэх аливаа үйлдэлд зарим код хавсаргах боломжтой байвал сайхан байх болно. Энэ нь буцааж дуудлагын функцүүдийн зорилго юм - тэдгээр нь зөвхөн тодорхой үйлдэл тохиолдсон үед л гүйцэтгэгддэг. Манай слайд шоу тайлбартай бөгөөд тэдгээрийг анхдагч байдлаар нуусан гэж бодъё. Хөдөлгөөнт дүрслэл хийх үед бид одоогийн слайдын тайлбарыг харуулах эсвэл түүгээр ямар нэг зүйл хийх хэрэгтэй.

jQuery дээр та дараах байдлаар буцаан дуудлагыг үүсгэж болно:

(функц($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( //... буцаан дуудах: функц() () ), сонголтууд); var slideTo = функц (слайд, элемент) ( var $currentSlide = $(options.slides, element).eq(slide); $currentSlide. animate(( тунгалаг байдал: 1 ), options.speed, options.easing, // Одоогийн слайдын сонголтуудыг буцааж дуудах.callback($) currentSlide).

Энэ тохиолдолд буцаан дуудах функц нь одоогийн слайдыг аргумент болгон авдаг .animate() функц юм. Та үүнийг хэрхэн ашиглаж болохыг эндээс үзнэ үү:

$(function() ( $("#main-slider").slideshow(( буцаан дуудах: функц(слайд) ( var $wrapper = slide.parent(); // Одоогийн тайлбарыг харуулж, бусдыг нь нууна $wrapper.find (" .слайд-гарчиг").нуух(); слайд.хайх(".слайд-гарчиг").show("удаан"); ) )); ));

Цэвэр JS дээр:

(функц() ( функц Slideshow(элемент, буцаан дуудах) ( this.callback = callback || function()); // Бидний буцааж дуудах this.el = document.querySelector(element); this.init(); ) Slideshow. prototype = ( init: function() ( //... this.slides = this.el.querySelectorAll(".slide"); //... //... ), _slideTo: функц(слайд) ( var self = энэ; 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); // Вызывает функцию по окончанию перехода } }; // })();

Буцах функц нь бүтээгчийн хоёр дахь параметр гэж тодорхойлогддог. Та үүнийг дараах байдлаар ашиглаж болно.

Document.addEventListener("DOMContentLoaded", function() ( var slider = new Slideshow("#main-slider", function(slide) ( var wrapper = slide.parentNode; // Одоогийн тайлбарыг харуулж, бусдыг нууна var allSlides = боодол. querySelectorAll(".слайд"); var caption = slide.querySelector(".slide-caption"); caption.classList.add("харагдах"); 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"); } } }); });

Гадаад APIs Одоогоор бидний ажлын хувилбар энгийн: бүх слайдууд аль хэдийн баримт бичигт байна. Хэрэв бид гаднаас (YouTube, Vimeo, Flickr) өгөгдөл оруулах шаардлагатай бол бид гадны контентыг хүлээн авахдаа слайдуудыг шууд бөглөх хэрэгтэй.

Гуравдагч талын серверийн хариу шууд ирэхгүй тул процесс явагдаж байгааг харуулахын тулд та ачаалах хөдөлгөөнт дүрс оруулах шаардлагатай.

Өмнөх Дараагийн

Энэ нь gif эсвэл цэвэр CSS хөдөлгөөнт дүрс байж болно:

#spinner ( хилийн радиус: 50%; хүрээ: 2px хатуу #000; өндөр: 80px; өргөн: 80px; байрлал: үнэмлэхүй; дээд: 50%; зүүн: 50%; зах: -40px 0 0 -40px; ) # spinner:after (агуулга: ""; байрлал: үнэмлэхүй; дэвсгэр өнгө: #000; дээд:2px; зүүн: 48%; өндөр: 38px; өргөн: 2px; хилийн радиус: 5px; -webkit-transform-origin: 50% 97%; хувиргах эхлэл: 50% 97%; -webkit-animation: өнцгийн 1с шугаман хязгааргүй; хөдөлгөөнт дүрс: өнцгийн 1с шугаман хязгааргүй; ) @-webkit-keyframes angular ( 0%(-webkit-transform:rotate(0deg) );) 100%(-webkit-transform:rotate(360deg);) ) @keyframes angular ( 0%(хувиргах:эргүүлэх(0deg);) 100%(хувиргах:эргүүлэх(360deg);) ) #spinner:өмнө ( агуулга: ""; байрлал: үнэмлэхүй; дэвсгэр өнгө: #000; дээд: 6px; зүүн: 48%; өндөр: 35px; өргөн: 2px; хилийн радиус: 5px; -webkit-transform-origin: 50% 94% ; хувиргах эхлэл: 50% 94%; -webkit-animation: ptangular 6s шугаман хязгааргүй; хөдөлгөөнт дүрс: ptangular 6s шугаман хязгааргүй; ) @-webkit-keyframes ptangular ( 0%(-webkit-transform:rotate(0deg);) 100 %(-webkit-transform:rotate(360deg);) ) @keyframes ptangular ( 0%(хувиргах:эргүүлэх(0deg);) 100%(хувиргах:эргүүлэх(360deg);) )

Алхамууд дараах байдалтай байх болно.
- гаднаас мэдээлэл авах
- ачаалагчийг нуух
- өгөгдлийг задлах
- HTML бүтээх
- слайд шоу харуулах
- процессийн слайд шоу

Бид YouTube-ээс хэрэглэгчийн хамгийн сүүлийн үеийн видеог сонгосон гэж бодъё. jQuery:

(функц($) ( $.fn.slideshow = функц(сонголтууд) ( сонголтууд = $.extend(( боодол: ".slider-wrapper", //... дуудагч: "#spinner", //... хязгаар: 5, хэрэглэгчийн нэр: "learncodeacademy" ), сонголтууд); //... var getVideos = function() ( // YouTube-ээс видео авах var ytURL = "https://gdata.youtube.com/feeds/api/ videos?alt=json&author=" + options.username + "&max-results=" + options.limit; $.getJSON(ytURL, function(videos)) ( // Видеог $(options.loader) JSON объект болгон авах. hide( ); // Ачаагчийг нууж байна var оруулгууд = 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);

Цэвэр JavaScript дээр нэмэлт алхам байдаг - JSON авах аргыг бий болгох:

Дараа нь процедур ижил төстэй байна:

(функц() ( функц Slideshow(элемент) ( 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: функц(url, буцаан дуудах) (буцах = буцаан дуудах || функц(); var хүсэлт = шинэ XMLHttpRequest(); request.open("GET", url, үнэн); request.send(null); хүсэлт .onreadystatechange = function() ( if (request.status == 200 && request.readyState == 4) ( var data = JSON.parse(request.responseText); // JSON объектыг буцаан дуудах(дата); ) else ( консол. log( request.status); ) ); ), //... getVideos: function() ( var self = this; // YouTube видеог авах var ytURL = "https://gdata.youtube.com/feeds/api /videos ?alt=json&author=" + self.username + "&max-results=" + self.limit; self._getJSON(ytURL, функц(видео)) ( // Видеог JSON объект болгон авах var entry = videos.feed.entry ; var html = ""; self.loader.style.display = "байхгүй"; // Ачаалагчийг нууж байна (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(); // Обрабатываем слайд-шоу } }; })(); Добавить метки

Хэрэв слайд нь зөвхөн зураг агуулсан бол бүтцийг бага зэрэг өөрчилж болно.

Өмнөх Дараагийн

Alt шинж чанарт утга учиртай утгыг нэмэхээ бүү мартаарай.

Хуудасны холбоосыг ашиглахын тулд та дараахь зүйлийг хийж болно.

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

Өмнөх Дараагийн 1 2 3

CSS Дараах бүтцээс эхэлцгээе:

Өмнөх Дараагийн

Дотор боодлын хэв маяг нь:

Слайд (хөвөгч: зүүн; байрлал: харьцангуй; өргөн: 1024 пиксел; өндөр: 683 пиксел; )

Товчлуурын оронд хуудасны холбоосыг ашиглахдаа та дараах хэв маягийг үүсгэж болно.

Эдгээр ангиудыг скриптээс динамик байдлаар хуваарилах болно.

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

Энгийн JS дээр .animate() арга байхгүй тул бид CSS шилжилтийг ашигладаг:

Slider-wrapper (байрлал: харьцангуй; // шаардлагатай шилжилт: зүүн 500ms шугаман; )

Одоо та зүүн талын шинж чанарыг загварын объектоор дамжуулан динамикаар өөрчилж болно:

Цэвэр JS дээр энэ нь иймэрхүү харагдаж байна:

IE10-аас хойш та ангиудыг classList-ээр удирдаж болно:

Link.classList.add("одоогийн");

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

jQuery дээр код дараах байдалтай байна.

.index() арга нь холбоос бүрийн тоон индексийг өгдөг.

Цэвэр JS-д ийм арга байхгүй тул өгөгдлийн шинж чанаруудыг ашиглах нь илүү хялбар байдаг:

Одоо бид процедуруудаа лавлагаатай холбож, саяхан үүсгэсэн өгөгдлийн шинж чанаруудыг ашиглаж болно:

Хэмжээг ойлгох нь Дараах CSS дүрэм рүү буцъя:

Slider-wrapper (өргөн: 9999px; өндөр: 683px; байрлал: харьцангуй; шилжилт: зүүн 500ms шугаман; )

jQuery дээр энэ нь энгийн:

Энд эхний өргөнийг слайд бүрийн өргөнөөр тохируулна. Та зүгээр л боодлын нийт өргөнийг тохируулах хэрэгтэй.

Одоо дотоод сав хангалттай өргөн байна. Цэвэр JS-д энэ нь ойролцоогоор ижил аргаар хийгддэг:

Дараах хэв маягийн багц нь энэ аргыг харуулж байна.

Цэвэр JS дээр та слайд бүрийн CSS шилжилтийг бүртгүүлэх шаардлагатай.

jQuery дээр код дараах байдалтай байна.

Тунгалаг байдлыг идэвхжүүлэхдээ үлдсэн слайдын хувьд энэ шинж чанарын утгыг өөрчлөх шаардлагатай.

JavaScript дээр энэ нь:

Медиа элементүүд: Видео Бид слайд шоунд видео оруулах боломжтой. Vimeo-ийн видео слайд шоуны жишээ энд байна:

Бүтэн хуудас слайд үзүүлэхийн тулд та дараах байдлаар хэв маягийг өөрчлөх хэрэгтэй.

Курсор слайдын хамгийн их тоонд хүрэхэд түүнийг дахин тохируулах шаардлагатай.

Цэвэр JS дээр код нь илүү хялбар болдог. Бид слайд бүрт CSS шилжилтийг тодорхой хугацаанд бүртгэдэг.

Слайд (шилжилт: тунгалаг байдал 3с шугаман; /* 3 секунд = 3000 миллисекунд */ )

Мөн код нь иймэрхүү байх болно:

$("body").on("keydown", function(e) ( var code = e.keyCode; if(code == 39)) ( // Зүүн сум $next.trigger("click"); ) if( код == 37) ( // Баруун сум $previous.trigger("click"); ) ));

Цэвэр JS дээр энгийн .trigger() аргын оронд dispatchEvent()-г ашиглах хэрэгтэй болно:

jQuery дээр та дараах байдлаар буцаан дуудлагыг үүсгэж болно:

Цэвэр JS дээр:

Буцах функц нь бүтээгчийн хоёр дахь параметр гэж тодорхойлогддог. Та үүнийг дараах байдлаар ашиглаж болно.

Өмнөх Дараагийн

Энэ нь gif эсвэл цэвэр CSS хөдөлгөөнт дүрс байж болно:

Бид YouTube-ээс хэрэглэгчийн хамгийн сүүлийн үеийн видеог сонгосон гэж бодъё. jQuery:

Цэвэр JavaScript дээр нэмэлт алхам байдаг - JSON авах аргыг бий болгох:

Дараа нь процедур ижил төстэй байна:

1. Маш сайн jQuery Slideshow

jQuery технологийг ашигласан том, гайхалтай слайд шоу.

2. jQuery залгаас "Scale Carousel"

jQuery ашиглан өргөтгөх боломжтой слайд шоу. Та өөрт хамгийн тохиромжтой слайдын хэмжээг тохируулах боломжтой.

3. jQuery залгаас "slideJS"

Текст тайлбар бүхий зургийн гулсагч.

4. “JSliderNews” залгаас 5. CSS3 jQuery гулсагч

Та навигацийн сумнууд дээр гүйлгэх үед дараагийн слайдын дугуй өнгөц зураг гарч ирнэ.

6. Сайхан jQuery "Presentation Cycle" слайдер

Зураг ачаалах үзүүлэлт бүхий jQuery гулсагч. Автомат слайд солих боломжтой.

7. jQuery залгаас "Parallax Slider"

Эзлэхүүн дэвсгэр эффект бүхий гулсагч. Энэ гулсагчийн онцлох зүйл бол арын дэвсгэрийн хөдөлгөөн бөгөөд хэд хэдэн давхаргаас бүрдэх бөгөөд давхарга бүр өөр өөр хурдтайгаар гүйдэг. Үр дүн нь эзэлхүүний нөлөөг дуурайлган хийдэг. Маш үзэсгэлэнтэй харагдаж байна, та өөрөө харж болно. Эффект нь Opera, Google Chrome, IE зэрэг хөтөч дээр илүү жигд харагдана.

8. Шинэ, хөнгөн jQuery гулсагч "bxSlider 3.0"

"Жишээнүүд" хэсэгт байрлах демо хуудаснаас та энэ залгаасын бүх боломжит хэрэглээний холбоосыг олох боломжтой.

9. jQuery зургийн слайдер, “slideJS” залгаас

Загварлаг jQuery слайдер нь таны төслийг чимэглэх нь гарцаагүй.

10. jQuery слайд шоуны залгаас “Easy Slides” v1.1

Слайд шоу үүсгэхэд ашиглахад хялбар jQuery залгаас.

11. jQuery Slidy залгаас

Төрөл бүрийн хувилбарт хөнгөн жинтэй jQuery залгаас. Автомат слайд солих боломжтой.

12. Автомат слайд солих боломжтой jQuery CSS галерей

Хэрэв зочин тодорхой хугацаанд "Урагшаа" эсвэл "Буцах" сумнууд дээр дарахгүй бол галерей автоматаар гүйлгэж эхэлнэ.

13. jQuery гулсагч "Nivo Slider"

Маш мэргэжлийн, өндөр чанартай, хүчинтэй код бүхий хөнгөн залгаас. Олон янзын слайд шилжилтийн эффектүүд байдаг.

14. jQuery гулсагч "MobilySlider"

Шинэ гулсагч. Төрөл бүрийн дүрсийг өөрчлөх эффект бүхий jQuery слайдер.

15. jQuery залгаас "Slider²"

Автомат гулсуур солигчтой хөнгөн гулсагч.

16. Шинэ JavaScript гулсагч

Зургийг автоматаар өөрчлөх слайдер.

Слайд автоматаар солигдох слайд шоуг хэрэгжүүлэхэд зориулсан залгаас. Зургийн өнгөц зургийг ашиглан дэлгэцийг удирдах боломжтой.

NivoSlider залгаасыг ашиглан jQuery CSS зургийн гулсагч.

19. jQuery слайдер “jShowOff”

Агуулгыг эргүүлэхэд зориулсан залгаас. Ашиглах гурван сонголт: навигацигүйгээр (слайд харуулах форматыг автоматаар өөрчлөх), товчлуур хэлбэрээр навигаци хийх, зургийн өнгөц зураг хэлбэрээр навигац хийх.

20. “Shutter Effect Portfolio” залгаас

Гэрэл зурагчны багцын дизайн хийхэд зориулсан шинэ jQuery залгаас. Галерей нь зургийг өөрчлөх сонирхолтой нөлөө үзүүлдэг. Линзний хаалтын ажиллагаатай төстэй эффект бүхий гэрэл зургууд бие биенээ дагадаг.

21. Хөнгөн жингийн javascript CSS слайдер “TinySlider 2”

Javascript болон CSS ашиглан зургийн гулсагчийг хэрэгжүүлэх.

22. Гайхалтай гулсагч "Tinycircleslider"

Загварлаг дугуй гулсуур. Зургийн хоорондох шилжилт нь гулсагчийг тойргийн эргэн тойронд улаан тойрог хэлбэрээр чирэх замаар хийгддэг. Хэрэв та дизайндаа дугуй элементүүдийг ашигладаг бол энэ нь таны вэбсайтад төгс тохирох болно.

23. jQuery-тэй зургийн гулсагч

Хөнгөн гулсагч "Slider Kit". Гулсагчийг янз бүрийн загвараар авах боломжтой: босоо болон хэвтээ. Зургийн хооронд янз бүрийн навигац хийх боломжтой: "Урагшаа" ба "Буцах" товчийг ашиглан, хулганы дугуйг ашиглан, слайд дээр хулганаар дарна уу.

24. “Slider Kit” бяцхан зургийн галерей

"Slider Kit" галерей. Өнгөц зургийг гүйлгэх нь босоо болон хэвтээ байдлаар хийгддэг. Зургийн хоорондох шилжилтийг хулганы дугуй, хулганаар дарах эсвэл курсорыг өнгөц зураг дээр байрлуулах замаар гүйцэтгэдэг.

25. jQuery агуулгын слайдер "Slider Kit"

jQuery ашиглан босоо болон хэвтээ агуулгын гулсагч.

26. jQuery слайд шоу "Slider Kit"

Слайд автоматаар солигдох слайд шоу.

27. Хөнгөн мэргэжлийн JavaScript CSS3 гулсагч

2011 онд бүтээгдсэн цэвэрхэн jQuery болон CSS3 слайдер.

Өнгөц зураг бүхий jQuery слайд шоу.

29. Энгийн jQuery слайд шоу

Навигацийн товчлуур бүхий слайд шоу.

30. Гайхалтай jQuery "Skitter" Slideshow

Гайхалтай слайд шоу үүсгэх jQuery Skitter залгаас. Plugin нь зургийг өөрчлөх үед 22 (!) төрлийн өөр өөр хөдөлгөөнт эффектүүдийг дэмждэг. Слайдын навигацийн хоёр сонголттой ажиллах боломжтой: слайдын дугаар ашиглах, өнгөц зураг ашиглах. Демо үзэхээ мартуузай, маш өндөр чанартай олдвор. Ашигласан технологиуд: CSS, HTML, jQuery, PHP.

31. "Эвгүй" слайд шоу

Функциональ слайд шоу. Слайд нь: энгийн зураг, тайлбартай зураг, зөвлөмж бүхий зураг, видео байж болно. Та навигаци хийхдээ гар дээрх сум, слайдын дугаарын холбоос, зүүн/баруун товчлууруудыг ашиглаж болно. Слайд шоу нь өнгөц зурагтай, зураггүй гэсэн хэд хэдэн хувилбартай. Бүх сонголтыг үзэхийн тулд демо хуудасны дээд талд байрлах Демо #1 - Демо #6 холбоосыг дагана уу.

Сэнсийг санагдуулам дүрсний гулсуурын маш анхны загвар. Хөдөлгөөнт слайдын шилжилт. Зургийн хооронд шилжих нь сум ашиглан хийгддэг. Мөн дээд талд байрлах Play/Pause товчийг ашиглан асааж, унтрааж болох автомат шилжилт байдаг.

Хөдөлгөөнт jQuery слайдер. Хөтчийн цонхны хэмжээг өөрчлөх үед дэвсгэр зураг автоматаар томордог. Зураг бүрийн хувьд тайлбар бүхий блок гарч ирнэ.

34. jQuery болон CSS3 ашиглан "Flux Slider" гулсагч

Шинэ jQuery слайдер. Слайдыг өөрчлөх үед хэд хэдэн гайхалтай хөдөлгөөнт эффектүүд.

35. jQuery залгаас “jSwitch”

JQuery хөдөлгөөнт галерей.

Автомат слайд солих боломжтой jQuery слайд шоу.

37. “SlideDeck 1.2.2” залгаасын шинэ хувилбар

Мэргэжлийн агуулгын гулсагч. Слайдыг автоматаар өөрчлөх сонголтууд, мөн хулганы дугуйг ашиглан слайд хооронд шилжих сонголтууд байдаг.

38. jQuery слайдер "Sudo Slider"

jQuery ашиглан хөнгөн зургийн гулсагч. Хэрэгжүүлэх олон сонголтууд байдаг: зургуудыг хэвтээ ба босоо байдлаар өөрчлөх, слайдын дугаартай болон холбоосгүй, зургийн тайлбартай болон тайлбаргүй, янз бүрийн зургийг өөрчлөх эффектүүд. Автомат слайд өөрчлөх функц байдаг. Хэрэгжүүлэх бүх жишээнүүдийн холбоосыг демо хуудаснаас олж болно.

39. jQuery CSS3 слайд шоу

Өнгөц зураг бүхий слайд шоу нь слайдыг автоматаар өөрчлөх горимыг дэмждэг.

40. jQuery слайдер "Flux Slider"

Зургийг өөрчлөх олон эффект бүхий гулсагч.

41. Энгийн jQuery гулсагч

jQuery ашиглан загварлаг дүрс гулсагч.

Сайн уу. Корвакс тантай хамт байна. Өнөөдөр би цэвэр javascript ашиглан шар шувууны зургийн галерей гулсуур үүсгэх нь хэр хялбар болохыг харуулах болно. Эхэлцгээе.

Эхлээд бид төслийн бүтцийг бий болгох хэрэгтэй. Энд нэг жишээ байна:

HTML зохион байгуулалт

index.html файлд дараах бүтцийг үүсгэх шаардлагатай.

CSS Styles #gallery( өргөн: 400px; text-align: center; margin: 0 auto; ) .photo( байрлал: харьцангуй; өндөр: 300px; ) .photo img( өргөн: 100%; байрлал: үнэмлэхүй; тунгалаг байдал: 0; зүүн: 0; шилжилт: тунгалаг байдал 1с; ) .photo img.shown( тунгалаг байдал: 1; ) .tabs(текстийг зэрэгцүүлэх: төв; padding-дээд: 20px; )

Энд анхаарах ёстой гол зүйл бол бид бүх зургийг анхдагч байдлаар ил тод болгодог (тунгалаг байдал: 0). Үзүүлсэн ангид бид тунгалаг байдлын шинж чанарыг нэмдэг: 1.

JS var btn_prev = document.querySelector(".tabs .prev"), btn_next = document.querySelector(".tabs .next"); var images = document.querySelectorAll(".photo img"); var i = 0; btn_prev.onclick = function())( images[i].className = ""; i = i - 1; if(i = images.length)( i = 0; ) images[i].className = "харуулсан"; );

Энд хамгийн сонирхолтой хэсэг байна. Эхлээд бид товшилтын үйл явдал болон зураг (btn_prev, btn_next, зураг) хавсаргах хоёр товчлуурыг эхлүүлнэ. Ажиллаж дууссаны дараа бид гулсагчаар гүйлгэх товчлуурууд дээр onclick үйл явдлыг шиддэг.

images[i].className = ""; Энд бид бүх зурган дээрх ангийг дарж устгана.

i ++ (—) энд бид слайд танигчийг товшилт бүрээр өөрчлөх болно

if(i > = images.length)( i = 0; ) ("урагш" товчлуур дээр дарах нөхцөл) сүүлчийн слайд хэзээ сонгогдсоныг шалгахын тулд бидэнд энэ нөхцөл хэрэгтэй. Хэрэв бид сүүлчийнхээс том слайдыг сонгосон бол индикаторт 0 оноо өгнө (энэ нь биднийг автоматаар багцын эхэнд тавина).

Хэрвээ би< 0){ i = images.length — 1; } (условие по клику на кнопку «назад») здесь если индификатор картники меньше 0 то индификатор будет равен последнему слайду -1 (т.к. массив у нас начинается с 0)

images[i].className = "харуулсан"; Энд бид одоогийн идэвхтэй слайдад үзүүлсэн ангийг нэмнэ.

Дүгнэлт

Өнөөдөр бид төрөлх JS ашиглан өөрийн гулсагч хийсэн. Та эх кодыг авах боломжтой. Корвакс тантай хамт байсан. Таны хөгжилд амжилт хүсье!