Како направити ЈаваСцрипт СлидеСхов у 3 једноставна корака

Ако сте прочитали наш водич даље како направити веб страницу , можда се питате шта даље учинити како бисте побољшали своје вештине. Израда пројекције слајдова са фотографијама је изненађујуће лак задатак, који вас може научити вредним вештинама потребним за посао програмирања.

Данас ћу вам показати како направити ЈаваСцрипт пројекцију слајдова од нуле. Хајдемо одмах!

Предуслови

Морате знати неколико ствари пре него што почнете са кодирањем. Уз одговарајући веб прегледач и уређивач текста по вашем избору (препоручујем Узвишени текст ), биће вам потребно искуство ХТМЛ , ЦСС , ЈаваСцрипт , и јКуери .

Ако нисте толико сигурни у своје вештине, прочитајте наш водич за коришћење Објектног модела документа и ове савете за учење ЦСС -а. Ако сте сигурни у ЈаваСцрипт, али никада раније нисте користили јКуери, погледајте наш основни водич за јКуери.

1. Почетак

Ова пројекција слајдова захтева неколико функција:

Подршка за слике
Контроле за промену слике
Наслов текста
Аутоматски режим

Чини се да је то једноставна листа функција. Аутоматски режим ће аутоматски пребацити слике на следећу у низу. Ево грубе скице коју сам направио пре него што сам написао било који код:

Ако се питате зашто се трудите око планирања, погледајте ове најгоре програмске грешке у историји. Овај пројекат неће никога убити, али од кључног је значаја добро разумевање кода и процедура планирања пре него што почнете са већим кодом - чак и ако је то само груба скица.

Ево почетног ХТМЛ -а који вам је потребан за почетак. Сачувајте ово у датотеци са одговарајућим именом, као што је индек.хтмл :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

Ево како код изгледа:

То је мало смеће, зар не? Хајде да га разложимо пре него што га побољшамо.

Овај код садржи „стандард“ ХТМЛ , глава , стил , скрипта , и тело ознаке. Ови делови су битне компоненте било које веб странице. ЈКуери је укључен путем Гоогле ЦДН -а - до сада ништа јединствено или посебно.

Унутар тела налази се див са ид -ом сховЦонтаинер . Ово је омот или спољни контејнер за складиштење пројекције слајдова. Касније ћете то побољшати помоћу ЦСС -а. Унутар овог контејнера постоје три блока кода, сваки са сличном наменом.

Родитељска класа је дефинисана именом класе имагеЦонтаинер :

Ово се користи за складиштење једног слајда - слика и натпис се складиште унутар овог контејнера. Сваки контејнер има јединствени ИД који се састоји од знакова у_ и број. Сваки контејнер има другачији број, од један до три.

Као последњи корак, референцира се слика, а наслов се чува у див -у са Наслов класа:

Dog

Направио сам слике са нумеричким именима датотека и сачувао их у фасцикли под називом Слике . Можете назвати своје како год желите, под условом да ажурирате ХТМЛ тако да се подудара.

Ако желите да имате више или мање слика у презентацији, једноставно копирајте и залепите или избришите блокове кода помоћу имагеЦонтаинер класе, не заборавите да ажурирате имена датотека и ИД -ове према потреби.

Коначно, креирани су тастери за навигацију. Ово омогућава кориснику да се креће кроз слике:

 ❮  
 ❯

Ове ХТМЛ ентитет кодови се користе за приказивање стрелица напред и назад, на сличан начин на који функционишу фонтови са иконама.

2. ЦСС

Сада када је основна структура постављена, време је да то учинимо прилично . Ево како ће то изгледати након овог новог кода:

Додајте овај ЦСС између стил ознаке:

html {  
 font-family: helvetica, arial;  
}  
#showContainer {  
 /* Main wrapper for all images */  
 width: 670px;  
 padding: 0;  
 margin: 0 auto;  
 overflow: hidden;  
 position: relative;  
}  
.navButton {  
 /* Make buttons look nice */  
 cursor: pointer;  
 float: left;  
 width: 25px;  
 height: 22px;  
 padding: 10px;  
 margin-right: 5px;  
 overflow: hidden;  
 text-align: center;  
 color: white;  
 font-weight: bold;  
 font-size: 18px;  
 background: #000000;  
 opacity: 0.65;  
 user-select: none;  
}  
.navButton:hover {  
 opacity: 1;  
}  
.caption {  
 float: right;  
}  
.imageContainer:not(:first-child) {  
 /* Hide all images except the first */  
 display: none;  
}

То сада изгледа много боље, зар не? Хајде да погледамо код.

Користим све узорке слика 670 к 503 пиксела , тако да је ова пројекција слајдова углавном дизајнирана око слика те величине. Мораћете да подесите ЦСС на одговарајући начин ако желите да користите слике различите величине. Препоручујем вам да промените величину слика на одговарајуће величине - различите слике различитих димензија изазваће проблеме са стилом.

Већина овог ЦСС -а је само по себи разумљиво. Постоји код за дефинисање величине контејнера за складиштење слика, поравнавање свега по средини, навођење фонта, заједно са дугметом и бојом текста. Постоји неколико стилова на које можда нисте раније наишли:

курсор: показивач - Ово мења курсор са стрелице у показивачки прст када померите курсор преко дугмади.
непрозирност: 0,65 - Ово повећава транспарентност дугмади.
усер-селецт: ноне - Ово осигурава да не можете случајно означити текст на дугмадима.

Резултате већине овог кода можете видети у дугмадима:

Најсложенији део овде је ова чудна линија:

.imageContainer:not(:first-child) {

Можда изгледа прилично необично, али је прилично разумљиво.

Прво, циља све елементе са имагеЦонтаинер класа. Тхе :не() синтакса наводи да би сви елементи унутар заграда требали бити искључено из овог стила. Коначно, :прво дете синтакса наводи да овај ЦСС треба да циља било који елемент који одговара имену али занемарите први елемент. Разлог за то је једноставан. Пошто је ово пројекција слајдова, потребна је само једна слика одједном. Овај ЦСС скрива све слике осим прве.

3. ЈаваСцрипт

Последњи део слагалице је ЈаваСцрипт. Ово је логика да заиста учините да пројекција слајдова функционише исправно.

Додајте овај код у свој скрипта ознака:

$(document).ready(function() {  
 $('#previous').on('click', function(){  
 // Change to the previous image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 decreaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 $('#next').on('click', function(){  
 // Change to the next image  
 $('#im_' + currentImage).stop().fadeOut(1);  
 increaseImage();  
 $('#im_' + currentImage).stop().fadeIn(1);  
 });  
 var currentImage = 1;  
 var totalImages = 3;  
 function increaseImage() {  
 /* Increase currentImage by 1.  
 * Resets to 1 if larger than totalImages  
 */  
 ++currentImage;  
 if(currentImage > totalImages) {  
 currentImage = 1;  
 }  
 }  
 function decreaseImage() {  
 /* Decrease currentImage by 1.  
 * Resets to totalImages if smaller than 1  
 */  
 --currentImage;  
 if(currentImage <1) {  
 currentImage = totalImages;  
 }  
 }  
});

Можда делује контраинтуитивно, али прескочићу почетне блокове кода и прећи ћу на објашњење кода од половине-не брините, објашњавам цео код!

Морате дефинисати две променљиве. (Ево како да дефинишете променљиве у ЈаваСцрипт -у.) Ове променљиве се могу сматрати главним променљивим конфигурације за пројекцију слајдова:

var currentImage = 1;  
var totalImages = 3;

Они чувају укупан број слика у пројекцији слајдова и број слике за почетак. Ако имате више слика, једноставно промените тоталИмагес променљива на укупан број слика које имате.

Две функције повећајте слику и смањи слику напредујте или се повуците цуррентИмаге променљива. Ако ова променљива иде ниже од један, или више од тоталИмагес , ресетује се на један или тоталИмагес . Ово осигурава да ће се пројекција слајдова петљати када дође до краја.

Вратимо се коду на почетку. Овај код „циља“ следеће и претходно дугме. Када притиснете свако дугме, оно позива одговарајуће повећати или смањење методе. Када се заврши, једноставно избледи слику на екрану и избледи на новој слици (како је дефинисано цуррентИмаге променљива).

Тхе зауставити() метода је уграђена у јКуери. Ово отказује све догађаје на чекању. Ово осигурава да је сваки притисак дугмета гладак, и значи да немате 100 притисака на дугмад који чекају да се изврше ако полудите по мишу. Тхе фадеИн (1) и фадеОут (1) методе умањују или избацују слике према потреби. Број одређује трајање фаде у милисекундама. Покушајте да промените ово на већи број, на пример 500. Већи број доводи до дужег времена преласка. Међутим, идите предалеко и можда ћете почети да видите чудне догађаје или „треперење“ између промена слике. Ево презентације на делу:

Аутоматско напредовање

Ова пројекција слајдова сада изгледа прилично добро, али потребан је још један последњи додир. Аутоматско напредовање је функција због које ће ова пројекција слајдова заиста заблистати. Након одређеног временског периода, свака слика ће аутоматски прећи на следећу. Међутим, корисник се и даље може кретати напред или назад.

како да убрзате игре за Виндовс 10

Ово је лак посао са јКуери -јем. Потребно је створити тајмер за извршавање сваког кода Икс секунди. Уместо писања новог кода, најједноставније је да опонашате „клик“ на дугме следеће слике и пустите постојећи код да обави сав посао.

Ево новог ЈаваСцрипт -а који вам је потребан - додајте га после смањи слику функција:

window.setInterval(function() {  
 $('#previous').click();  
}, 2500);

Овде се не дешава много. Тхе виндов.сетИнтервал метход ће редовно изводити део кода, како је дефинисано временом наведеним на крају. Време 2500 (у милисекундама) значи да ће се овај дијапројекција унапредити сваких 2,5 секунде. Мањи број значи да ће свака слика напредовати брже. Тхе кликните метода покреће дугмад за покретање кода као да је корисник притиснуо дугме мишем.

Ако сте спремни за ваш следећи ЈаваСцрипт изазов, покушајте да направите веб локацију са статичним градитељем веб страница попут ГатсбиЈС-а или фронт-енд оквиром попут Вуе. Ако учите Руби, Јекилл је такође опција. Ево како се Јекилл и ГатсбиЈС сналазе један против другог.

Кредит за слику: Тхаранат Сардсри путем Схуттерстоцк.цом

Објави Објави Твеет Емаил 8 најбољих веб локација за бесплатно преузимање аудио књига

Аудио књиге су одличан извор забаве и много их је лакше пробавити. Ево осам најбољих веб страница на којима их можете бесплатно преузети.

Прочитајте следеће Повезане теме

Програмирање
ЈаваСцрипт
Веб дизајн

О аутору Јое Цобурн(136 објављених чланака)

Јое је дипломирао рачунарство на Универзитету Линцолн, УК. Он је професионални програмер софтвера и када не лети беспилотним летелицама или не пише музику, често га се може затећи како фотографише или производи видео записе.

Више од Јоеа Цобурна

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили