Энгийн мэдрэгчтэй jQuery гулсагч. Js зурагт зориулсан дасан зохицох слайдеруудын сонголт

Гэхдээ бид JS-ийн үндсийг судалж байгаа тул үндсийг судлахын тулд би зөвхөн JavaScript хэл ашиглан энгийн гулсагчийг хэрхэн бүтээхийг тайлбарлах болно. За, материалд дүн шинжилгээ хийж эхэлцгээе!

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

Гэсэн хэдий ч энэ нь гулсагчийн стандарт хэрэглээ юм. Ийм технологийг үйлчлүүлэгчдийг сурталчилгааны бараа, үйлчилгээнд татах, эсвэл аж ахуйн нэгжийн давуу талыг тодорхойлоход ашигладаг.

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

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

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

Доор би өөрийн өргөдлийн кодыг хавсаргав. Би код бичихдээ танд зориулж сэтгэгдэл үлдээсэн.

Зургийн автомат шилжүүлэгч /*Хүрээний харагдах байдлыг тайлбарлах, ирээдүйн гулсагчийн үндэс */ #slides( байрлал: харьцангуй; өндөр: 415 пиксел; өргөн: 100%; дэвсгэр: 0px; жагсаалтын хэв маяг: байхгүй; хайрцаг- сүүдэр: 0 0 7px #010, 0 0 10px цэнхэр, 0 0 15px #010, 0 0 35px #010; /* Агуулгын жагсаалтын зүйлүүд нь эх элементийн төвд харагдах болно, өөрөөр хэлбэл. энэ тохиолдолд ul элементийн төвд - слайдын суурь */ li ( text-align: center; ) /* Би слайдын харагдах байдлыг өөрөө дүрсэлдэг */ .slide( байрлал: үнэмлэхүй; тунгалаг байдал: 0 ; top: 0px; 0px; width: 100%; : 1 z-индекс: 4;

Та css болон html кодтой холбоотой асуудал гараагүй гэж найдаж байна. Гэхдээ би зохиолын ажлыг задлах шаардлагатай гэж үзэж байна. Ингээд бичигдсэн зүйлийг тайлах ажил руугаа орцгооё.

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

document.querySelectorAll("#слайд .слайд")

Тиймээс MySlider нь дөрвөн элементийн цуглуулгыг хадгалдаг.

Дараа нь би currentPicture хувьсагчийг тэг болгож аль зургийг үзүүлж эхлэхийг зааж өгнө. Дараа нь би слайдын өөрчлөлт 2.7 секундын дотор хийгдэх бөгөөд дараагийн слайдыг боловсруулах функцийг дуудах ёстойг зааж өгнө.

Функц руугаа шилжье.

Эхлээд одоогийн жагсаалтын элементийн хувьд би ангиудын тайлбарыг өөрчилдөг, i.e. Би "слайд харуулах" -ыг "слайд" болгон дахин бичдэг. Үүний үр дүнд зураг нь үл үзэгдэх болно.

Одоо би дэлгэцэн дээр гарч ирэх шинэ цуглуулгын элементийг тодорхойлж байна. Үүнийг хийхийн тулд би одоогийн +1 байрлалыг авна. Би бас байгаа слайдын тоогоор үлдэгдэл (%) хуваах аргыг ашигладаг болохыг та анзаарсан байх. Үзэсгэлэнг шинэ тойрогт эхлүүлэхийн тулд чихтэй энэ заль мэх хэрэгтэй. Энэ нь шууд утгаараа иймэрхүү харагдах болно.

Бид урагш болон буцах товчлууруудыг нэмэх хэрэгтэй.

Үүнийг хийхийн тулд та өмнө нь бичсэн кодыг нэмэх хэрэгтэй.

Слайдерын бүтэц бүхэлдээ ижил хэвээр байх болно. Тэмдэглэгээнд хоёр сав нэмэгдэх бөгөөд энэ нь товчлуур болж үйлчилнэ.

Контейнер.slider-box-той харьцуулахад үнэмлэхүй байрлалын улмаас товчлуурууд байр сууриа эзэлнэ

Slider-box( байрлал : харьцангуй ; өргөн : 320px ; өндөр : 210px ; халих : далд ; ) .slider( байрлал : харьцангуй ; өргөн : 10000px ; өндөр : 210px ; ) .slider img( хөвөх : зүүн ;)- .prev , .slider-box .next( байрлал : үнэмлэхүй ; дээд : 100px ; дэлгэц : блок ; өргөн : 29px ; өндөр : 29px ; курсор : заагч ; ) .slider-box .prev( зүүн : 10px ; дэвсгэр : url ( ../images/slider_controls.png ) давтагдахгүй 0 0 ) .slider-box .next( баруун : 10px ; дэвсгэр : url (../images/slider_controls.png ) давтагдахгүй -29px 0 ; )

Слайдер автоматаар гүйлгэж байна. Анхдагч байдлаар, хөдөлгөөн зүүнээс баруун тийш явдаг боловч шаардлагатай бол курсын хувьсагчийг ашиглан хөдөлгөөний чиглэлийг өөрчилж болно. Хувьсагчийн утга 1-ээс -1 болж өөрчлөгдөхөд гулсагчийн хөдөлгөөний чиглэл өөрчлөгдөнө.

Курсор гулсагч дотор байх үед гулсагч дээрх зургууд өөрчлөгдөх ёсгүй. Яагаад үүнийг хийж байна вэ? Энэ бол энгийн. Хэрэв хулганы курсор гулсагч дээр байрласан бол энэ нь сайтын зочин түүний агуулгыг сонирхож байна гэсэн үг юм. Энэ үед та слайдыг автоматаар өөрчлөх ёсгүй.

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

Энэ бол jQuery дээр бичигдсэн мэдрэгчтэй гулсагч юм. Энэхүү залгаасын хөдөлгүүр нь CSS3 хөдөлгөөнт дүрсийг ашигладаг боловч хөтчүүдийн хуучин хувилбаруудыг ашиглах боломжийг олгодог. Glide.js нь энгийн бөгөөд хөнгөн.

Plugin-ийн цорын ганц хамаарал нь jQuery бөгөөд бид эхлээд оруулах ёстой:

Үндсэн хэв маягийг холбож үзье.

Слайдерын html бүтцийг бүтээцгээе.

Өгөгдмөл тохиргоотой гулсагчийг ажиллуулна уу...

$(".slider").glide();

...эсвэл өөртөө тохируулаарай

$(".slider"). glide(( автоматаар тоглуулах: 5000, сум: "бие", nav: "бие" ));

Боломжтой параметрүүдийн жагсаалт:

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

Var glide = $(".slider").glide().data("api_glide");

API аргууд одоо танд боломжтой.

Glide.jump(3, console.log("Wooo!"));

• .current() - Одоогийн талын дугаарыг буцаана
• .play() - Автоматаар гүйлгэж эхлэх
• .pause() - Автоматаар гүйлгэхийг зогсоох
• .next(буцах) - Гулсагчийг урагш гүйлгэ
• .prev(буцах) - Гулсагчийг буцааж гүйлгэ
• .jump(зай, буцааж залгах) - Тодорхой слайд руу шилжих
• .nav(target) - Тодорхой элементэд навигацыг хавсаргах (жишээ нь: "body", ".class", "#id")
• .arrows(target) - Тодорхой элементэд сум хавсаргана (жишээ нь: "body", ".class", "#id")

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

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

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

Бидний гол объект нь харах цонх байх болно, өөрөөр хэлбэл бидний зургууд хэрхэн эргэлдэж байгааг харах блок, дотор нь бид гулсууртай байх болно, энэ нь нэг мөрөнд эгнүүлсэн бүх зургийг агуулсан блок байх бөгөөд энэ нь өөрчлөгдөх болно. түүний харах цонхны доторх байрлал.


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


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

Миний дээр дурдсан зүйлсийн дараа энэ бүх зүйл хэрхэн ажилладаг логик нь тодорхой байх ёстой гэж би бодож байна, гэхдээ хэрэв хаа нэгтээ үл ойлголцол гарсаар байвал доорх кодоор бүх зүйл тодорхой болно, танд бага зэрэг тэвчээр хэрэгтэй.

Одоо бичье! Юуны өмнө индекс файлаа нээгээд тэнд шаардлагатай тэмдэглэгээг бичье.

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

Одоо бид энэ бүх зүйлийг загварчлах хэрэгтэй, ихэвчлэн хэв маягийг онцгойлон тайлбарладаггүй, гэхдээ ирээдүйд үл ойлголцол гарахгүйн тулд би үүнд анхаарлаа хандуулахаар шийдсэн.

Блок-for-slider-ээс эхэлцгээе, энэ бол дахин хуудасны блок бөгөөд бид гулсагчдад хуваарилах болно, түүний өндөр нь түүний өргөн, зургийн харьцаанаас хамаарна, учир нь Viewport нь гулсагчийн блокийн өргөнийг бүхэлд нь эзэлдэг, дараа нь слайд өөрөө ижил өргөнтэй байх ба үүний дагуу доторх зураг нь өргөнөөс хамааран өндрийг өөрчилдөг (пропорцийг хадгалсан). Би энэ элементийг хуудсан дээрээ хэвтээ байдлаар голд нь байрлуулж, дээрээс нь 100px доголтойгоор байрлуулсан нь жишээнд илүү тохиромжтой болсон.

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


Дараагийн CSS шинж чанар нь user-select:none бөгөөд энэ нь товчлуур дээр олон удаа дарахад гулсагч элементүүдийн цэнхэр өнгөөр ​​тодрохоос ангижрах боломжийг олгодог.

Slidewrapper руу шилжихэд яагаад байрлал: харьцангуй, үнэмлэхүй биш гэж? Бүх зүйл маш энгийн, учир нь ... Хэрэв бид хоёр дахь сонголтыг сонговол viewport overflow:hidden property-тэй бол бидэнд юу ч харагдахгүй, учир нь Харах хэсэг нь өөрөө гулсуурын өндрийг тохируулахгүй тул өндөртэй байх болно:0 . Өргөн яагаад чухал вэ, яагаад бид үүнийг огт тавьдаг вэ? Гол нь бидний слайдуудын өргөн нь харах талбарын 100% -тай тэнцүү байх бөгөөд тэдгээрийг эгнээнд байрлуулахын тулд бид тэдгээрийг байрлуулах газар хэрэгтэй тул гулсуурын өргөн нь харах цонхны өргөний 100% -тай тэнцүү байх ёстой. слайдын тоогоор үржүүлсэн (миний хувьд 4). Шилжилтийн болон шилжилтийн хугацаа-функцийн хувьд энд 1с нь гулсуурын байрлалын өөрчлөлт 1 секундын дотор хийгдэх бөгөөд бид үүнийг ажиглах болно гэсэн үг бөгөөд ease-in-out нь эхлээд удаашралтай явдаг хөдөлгөөнт дүрс юм. дунд хүртэл хурдасч, дахин удааширч, энд та өөрийн үзэмжээр утгыг тохируулж болно.

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

Дараа нь бид слайдуудаа загварчилдаг, тэдгээрийн өргөн нь харах цонхны өргөнтэй тэнцүү байх ёстой, гэхдээ ... Тэдгээр нь слайдын өргөнийг слайдын тоогоор үржүүлсэнтэй тэнцүү өргөнтэй слайд боодолд байгаа бөгөөд дараа нь харах цонхны өргөнийг дахин авахын тулд бид слайдын өргөний 100% -ийг слайдын тоонд хуваах хэрэгтэй (миний хувьд дахин, 4-ээр). Дараа нь бид display:inline ашиглан тэдгээрийг доторлогооны элемент болгон хувиргаж, float:left шинж чанарыг нэмж зүүн тийш хөвөгчийг тохируулна. Жагсаалтын хэв маягийн тухай:none Би үүнийг li-аас анхдагч тэмдэглэгээг арилгахад ашигладаг гэж хэлж болно, ихэнх тохиолдолд энэ нь нэг төрлийн стандарт юм.

Slide-img-ийн тусламжтайгаар бүх зүйл энгийн бөгөөд зураг нь слайдын өргөнийг бүхэлд нь эзэлнэ, слайд нь өндөрт тохируулна, слайд нь слайдын өндөрт тохируулна, харах цонхны өндөр нь эргээд өндрийн утгыг авна. slidewrapper , тиймээс бидний гулсагчийн өндөр нь миний дээр аль хэдийн бичсэн гулсагчдад зориулсан зургийн харьцаа болон блокны хэмжээнээс хамаарна.

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

Слайдер кодыг агуулсан js файлаа нээцгээе, учир нь jQuery-г холбохоо бүү мартаарай. Бид энэ хүрээг ашиглан бичих болно. Дашрамд хэлэхэд, энэ нийтлэлийг бичиж байх үед би jQuery 3.1.0 хувилбарыг ашиглаж байна. Скрипттэй файл нь өөрөө үндсэн шошгоны төгсгөлд байх ёстой, учир нь Бид эхлээд эхлүүлэх шаардлагатай DOM элементүүдтэй ажиллах болно.

Одоохондоо бид хэд хэдэн хувьсагчийг зарлах шаардлагатай байна, нэг нь харах цонхонд тодорхой цаг хугацаанд бидний харж буй слайдын дугаарыг хадгалах болно, би үүнийг slideNow гэж нэрлэсэн бол хоёр дахь нь эдгээр слайдуудын дугаарыг хадгалах болно. Энэ бол slideCount юм.

slideNow хувьсагчийг 1-ийн анхны утгад тохируулах ёстой, учир нь Хуудсыг ачаалах үед бидний тэмдэглэгээнд үндэслэн бид эхний слайдыг харах цонхонд харах болно.

slideCount дээр бид слайд боодлын хүүхдийн элементүүдийн тоог байрлуулах болно, энд бүх зүйл логик юм.
Дараа нь та слайдыг баруунаас зүүн тийш шилжүүлэх үүрэгтэй функцийг үүсгэх хэрэгтэй, үүнийг зарлацгаая.

Бид үүнийг кодын үндсэн блок дээр дуудах бөгөөд үүнийг дараа нь авч үзэх болно, гэхдээ одоогоор бид функцдээ юу хийх ёстойг хэлэх болно:

Эхлээд бид мэдээллийнхээ сүүлийн слайд дээр байгаа эсэхийг шалгана уу? Үүнийг хийхийн тулд бид бүх слайдынхаа дугаарыг $("#slidewrapper").children().length ашиглан авч, слайдынхаа дугаараар шалгана, хэрэв тэдгээр нь тэнцүү байвал бид үзүүлж эхлэх хэрэгтэй гэсэн үг юм. тэжээлийг 1 слайдаас дахин оруулах бөгөөд энэ нь бид гулсуурын CSS хувиргах шинж чанарыг translate(0, 0) болгон өөрчилснөөр эхний слайдыг бидний харах талбарт оруулахаар анхны байрлал руу нь шилжүүлнэ гэсэн үг. -webkit болон -ms-ийн талаар хөтчүүд хоорондын хангалттай дэлгэцийг харна уу (css шинж чанарын лавлагааг үзнэ үү). Үүний дараа slideNow хувьсагчийн утгыг шинэчлэхээ мартуузай, слайдын дугаар 1 харагдаж байна: slideNow = 1;

Үүнтэй ижил нөхцөл нь бидний харж буй слайдын тоо манай слайдын тоонд багтаж байгаа эсэхийг шалгах шаардлагатай боловч хэрэв энэ нь ямар нэгэн байдлаар биелээгүй бол бид дахин 1-р слайд руу буцах болно.

Хэрэв эхний нөхцөл хангагдаагүй бол энэ нь бид одоогоор сүүлчийн слайд дээр ч байхгүй, байхгүй байгаа ч биш гэсэн үг бөгөөд энэ нь бид дараагийн слайд руу шилжих шаардлагатай гэсэн үг бөгөөд бид слайдыг зүүн тийш шилжүүлэх замаар үүнийг хийх болно. Харах цонхны өргөнтэй тэнцэх утгаар шилжих нь танил болсон орчуулгын шинж чанараар дахин хийгдэх бөгөөд түүний утга нь "translate(" + translateWidth + "px, 0)" -тэй тэнцүү байх ба translateWidth нь бидний ашиглах зай юм. гулсуурыг шилжүүлсэн. Дашрамд хэлэхэд, энэ хувьсагчийг кодынхоо эхэнд зарлая:

Дараагийн слайд руу шилжсэний дараа бид дараагийн слайдыг харж байгаагаа одоо слайддаа хэлье: slideNow++;

Энэ үед зарим уншигчид яагаад $("#viewport").width()-г слайдын өргөнийг үргэлж гарт байлгахын тулд slideWidth гэх мэт хувьсагчаар сольсонгүй гэж гайхаж магадгүй юм? Хариулт нь маш энгийн, хэрэв манай сайт дасан зохицох чадвартай бол гулсагчдад зориулж хуваарилагдсан блок нь дасан зохицох чадвартай тул үүн дээр үндэслэн хуудсыг дахин ачаалахгүйгээр цонхны өргөнийг өөрчлөхөд (жишээлбэл, утсаа асаах) ойлгож болно. түүний тал), харах цонхны өргөн өөрчлөгдөх бөгөөд үүний дагуу нэг слайдын өргөн өөрчлөгдөнө. Энэ тохиолдолд манай гулсуур нь анх байсан өргөний утга руу шилжих бөгөөд энэ нь зургуудыг хэсэг хэсгээр нь харуулах эсвэл харах цонхонд огт харуулахгүй гэсэн үг юм. Функцдээ slideWidth-ийн оронд $("#viewport").width() гэж бичснээр бид слайдыг солих бүрт харах талбарын өргөнийг тооцоолоход хүргэдэг бөгөөд ингэснээр дэлгэцийн өргөн огцом өөрчлөгдөх үед дэлгэц рүү гүйлгэх болно. бидэнд хэрэгтэй слайд.

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

Js дэх хугацааг миллисекундээр илэрхийлнэ.

Одоо дараах бүтцийг бичье.

Энд бүх зүйл илүү хялбар байж болохгүй: $(document).ready(function () ()) бүтээцээр бид баримтыг бүрэн ачаалсны дараа дараах үйлдлүүдийг хийх ёстой гэж хэлж байна. Дараа нь бид зүгээр л суулгасан setInterval функцийг ашиглан slideInterval-тай тэнцүү интервалтай nextSlide функцийг дууддаг.

Дээр дурдсан бүх алхмуудын дараа бидний гулсагч төгс эргэх ёстой, гэхдээ ямар нэг зүйл буруу болвол jQuery хувилбар эсвэл аливаа файлын буруу холболттой холбоотой байж магадгүй юм. Та кодын хаа нэгтээ алдаа гаргасан байж магадгүй гэдгийг үгүйсгэх шаардлагагүй тул би бүх зүйлийг дахин шалгахыг зөвлөж байна.


Энэ хооронд цааш явъя, курсорыг зөөвөрлөхөд гүйлгэхийг зогсоох гэх мэт функцийг гулсагчдаа нэмж оруулахын тулд бид кодын үндсэн блокт ($(баримт)).ready( дотор) дараах зүйлийг бичих хэрэгтэй. функц () ()) бүтэц:

Энэ кодыг шинжилж эхлэхийн тулд бид switchInterval гэж юу болохыг мэдэх хэрэгтэй. Нэгдүгээрт, энэ нь nextSlide функцийн үечилсэн дуудлагыг хадгалдаг хувьсагч бөгөөд энгийнээр хэлэхэд бидэнд дараах код байдаг: setInterval(nextSlide, slideInterval); , энэ болж хувирав: switchInterval = setInterval(nextSlide, slideInterval); . Эдгээр заль мэхийг хийсний дараа бидний үндсэн кодын блок дараах хэлбэрийг авсан.

Энд би hover үйл явдлыг ашигладаг бөгөөд энэ нь "хөөгүүр дээр" гэсэн утгатай бөгөөд энэ үйл явдал нь курсорыг объект дээр, энэ тохиолдолд харах талбар дээр аваачих мөчийг хянах боломжийг олгодог.

Хулганы дараа би хаалтанд заасан интервалыг арилгадаг (энэ бол бидний switchInterval ), дараа нь таслалаар тусгаарлаж, курсорыг буцааж хөдөлгөхөд юу хийхээ бичнэ, энэ блок дээр би өөрчлөх интервалыг үе үе рүү дахин онооно. NextSlide функц руу залгана уу.

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

Одоо гулсагчдаа товчлуур нэмэх цаг боллоо, урагш болон буцах товчлууруудаас эхэлцгээе.

Юуны өмнө тэдгээрийг тэмдэглэе:

Эхлээд энэ тэмдэглэгээ нь ойлгомжгүй байж магадгүй, би энэ хоёр товчлуурыг нэг div дотор prev-next-btns гэсэн ангиллаар боосон гэдгээ шууд хэлье, та үүнийг хийх шаардлагагүй, үр дүн гарахгүй. өөрчлөх, одоо бид тэдэнд хэв маяг нэмэх бөгөөд бүх зүйл сайхан болно Энэ нь тодорхой байна:

Эхлээд бид товчлууруудаа position:absolute ашиглан байрлуулж, улмаар харах цонхон доторх байрлалаа чөлөөтэй удирдаж, дараа нь бид эдгээр товчлууруудын хэмжээг тодорхойлж, хүрээний радиусыг ашиглан булангуудыг тойруулан дугуй болгон хувиргана. Тэдгээрийн өнгө нь цагаан, өөрөөр хэлбэл #fff байх ба харах талбарын дээд ирмэгээс офсет нь энэ харах талбарын өндрийн хагасыг хасч, товчлуурын өндрийн хагастай тэнцүү байх болно (миний хувьд 25px), тиймээс бид тэдгээрийг төвд босоо байдлаар байрлуулна. Дараа нь бид тэдгээрийн дээгүүр гүйлгэх үед курсор маань заагч болж өөрчлөгдөхийг зааж өгөх бөгөөд эцэст нь бид товчлуурууддаа ирмэгээсээ 20 пиксел зайтай байх ёстойг тус тусад нь хэлэх бөгөөд ингэснээр бид тэдгээрийг өөрт тохирсон байдлаар харах болно. .

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

Загварын дараа бидний гулсагч иймэрхүү харагдах ёстой.


Дараа нь бид js файл руугаа буцаж очоод товчлуурынхаа ажиллагааг тайлбарлах болно. За, дахиад нэг функц нэмье, энэ нь өмнөх слайдыг харуулах болно:

Үүнийг prevSlide гэж нэрлэдэг бөгөөд зөвхөн prev-btn дээр дарахад л дуудагдах болно. Эхлээд бид 1-р слайд дээр байгаа эсэхээ шалгана, эндээс бид слайдNow нь бидний слайдын бодит хүрээнээс хэтэрсэн эсэхийг шалгадаг бөгөөд хэрэв нөхцөлүүдийн аль нэг нь үнэн бол бид сүүлчийн слайд руу шилжиж, слайдыг зөөнө. бидэнд хэрэгтэй үнэ цэнэ. Бид энэ утгыг томъёогоор тооцоолно: (нэг слайдын өргөн) * (слайдын тоо - 1), бид энэ бүгдийг хасах тэмдгээр авдаг, учир нь Бид үүнийг зүүн тийш шилжүүлбэл, харах цонх бидэнд сүүлийн слайдыг харуулах болно. Энэ блокийн төгсгөлд бид мөн slideNow хувьсагчд сүүлийн слайд одоо бидний харж байгаа гэдгийг хэлэх хэрэгтэй.

Хэрэв бид эхний слайд дээр байхгүй бол бид 1-ийг буцаах хэрэгтэй, үүний тулд бид slidewrapper-ийн хувиргах шинж чанарыг дахин өөрчилнө. Томъёо нь: (нэг слайдын өргөн) * (одоо байгаа слайдын тоо - 2), бид энэ бүгдийг хасах тэмдгээр авдаг. Гэхдээ яагаад -2, харин -1 биш, бид ердөө 1 слайдыг буцаах хэрэгтэй гэж үү? Баримт нь хэрэв бид 2-р слайд дээр байгаа бол манай слайдын хувиргах: translate(x,0) шинж чанарын x хувьсагч нь аль хэдийн нэг слайдын өргөнтэй тэнцүү байна, хэрэв бидэнд хэрэгтэй гэж хэлбэл Одоогийн слайдын тооноос 1-ийг хасахын тулд бид дахин нэгийг авах бөгөөд үүний дагуу слайдыг аль хэдийн шилжүүлсэн тул бид ижил харах цонхны өргөнийг 0-ээр солих шаардлагатай бөгөөд энэ нь slideNow - 2 гэсэн үг юм.

Одоо бид эдгээр мөрүүдийг кодын үндсэн блокт нэмэхэд л хангалттай.

Энд бид зүгээр л товчлуурууд дарагдсан эсэхийг хянадаг бөгөөд энэ тохиолдолд бид шаардлагатай функцуудыг дууддаг, бүх зүйл энгийн бөгөөд логик юм.

Одоо слайд навигацийн товчлууруудыг нэмж тэмдэглэгээ рүү буцъя:

Таны харж байгаагаар харах цонхны дотор үүрлэсэн жагсаалт гарч ирсэн, түүнд nav-btns танигчийг өгцгөөе, дотор нь бидний навигацийн товчлуурууд байгаа, бид тэдэнд слайд-nav-btn анги оноох болно, гэхдээ бид дуусгах боломжтой. тэмдэглэгээ, загварууд руу шилжье:

Бид товчлуурууд байрладаг nav-btns блокт шинж чанарын байрлалыг өгдөг: үнэмлэхүй нь харах цонхыг өндөрт сунгахгүй, учир нь slidewrapper нь байрлал:харьцангуй шинж чанартай байдаг тул бид текст-align:center ашиглан товчлууруудыг хэвтээ байдлаар харахын тулд голчлохын тулд өргөнийг 100% болгож, доод талын шинж чанарыг ашиглан блокдоо зайтай байх ёстойг мэдэгдэнэ. доод ирмэгээс 20px.

Товчлуураар бид слайдтай ижил зүйлийг хийдэг, гэхдээ одоо бид тэдэнд display:inline-block өгдөг, учир нь дэлгэцтэй: inline нь өргөн, өндөрт хариу үйлдэл үзүүлэхгүй, учир нь туйлын байрлалтай блокт байна. Тэднийг цагаан болгож, аль хэдийн танил болсон хилийн радиусыг ашиглан тойрог хэлбэрийг өгцгөөе. Бид тэдгээрийн дээгүүр гүйлгэх үед ердийн дэлгэцийн хувьд курсорын харагдах байдлыг өөрчлөх болно.

Одоо jQuery хэсэг рүү орцгооё:
Эхлээд бидний дарсан товчлуурын индексийг хадгалах navBtnId хувьсагчийг зарлацгаая.

Энд бид slide-nav-btn дээр дарах үед бид юуны түрүүнд navBtnId хувьсагч руу дарсан товчлуурын индексийг, өөрөөр хэлбэл түүний серийн дугаарыг өгдөг функцийг дууддаг, учир нь тооллого тэгээс эхэлдэг. хоёр дахь товчлуур дээр дарж, дараа нь энэ нь navBtnId утга 1-д бичигдэнэ. Дараа нь бид товчлуурын серийн дугаар дээр нэгийг нэмсэн газрыг шалгана, тооллого 0-ээс биш, харин 1-ээс эхэлсэн юм шиг тоо гарна. энэ дугаарыг одоогийн слайдын дугаартай харьцуулна уу, хэрэв тэдгээр нь таарч байвал бид ямар ч үйлдэл хийхгүй, учир нь хүссэн слайд аль хэдийн харах хэсэгт байгаа.

Хэрэв бидэнд хэрэгтэй слайд харах талбарт байхгүй бол бид слайдыг зүүн тийш шилжүүлэх зайг тооцоолж, CSS хувиргах шинж чанарын утгыг өөрчлөх (пиксел дэх ижил зай, 0) ). Бид үүнийг нэгээс олон удаа хийсэн тул асуулт байх ёсгүй. Төгсгөлд нь бид одоо байгаа слайдын утгыг slideNow хувьсагч руу дахин хадгалдаг.

Үнэн хэрэгтээ, хэрэв ямар нэг зүйл тодорхойгүй байвал би jsfiddle-ийн холбоосыг үлдээх болно, үүнд материалд бичигдсэн бүх кодыг өгөх болно.

Анхаарал тавьсанд баярлалаа!

Шошго: шошго нэмэх

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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