Paano Bumuo ng isang JavaScript SlideShow sa 3 Madaling Mga Hakbang

Paano Bumuo ng isang JavaScript SlideShow sa 3 Madaling Mga Hakbang

Kung nabasa mo na ang aming gabay sa kung paano gumawa ng isang website , maaari kang nagtataka kung ano ang susunod na gagawin upang mapabuti ang iyong mga kasanayan. Ang paggawa ng isang slideshow sa larawan ay isang nakakagulat na madaling gawain, at isa na maaaring magturo sa iyo ng mahahalagang kasanayan na kinakailangan upang makakuha ng isang trabaho sa pagprograma.





Ngayon ay ipapakita ko sa iyo kung paano bumuo ng isang JavaScript slideshow mula sa simula. Tumalon kaagad!



Mga Pangangailangan

Kakailanganin mong malaman ang ilang mga bagay bago ka makapagsimula sa pag-coding. Kasabay ng isang naaangkop na web browser at text editor na iyong pinili (Inirerekumenda ko Sublime Text ), kakailanganin mo ng kaunting karanasan sa HTML , CSS , JavaScript , at jQuery .





Kung hindi ka masyadong tiwala sa iyong mga kasanayan, tiyaking nabasa mo ang aming gabay sa paggamit ng Modelong Bagay ng Dokumento at mga tip na ito upang malaman ang CSS. Kung kumpiyansa ka sa JavaScript ngunit hindi pa nakakagamit ng jQuery dati, pagkatapos suriin ang aming pangunahing gabay sa jQuery.

1. Pagsisimula

Nangangailangan ang slideshow na ito ng maraming mga tampok:



  1. Suporta para sa mga imahe
  2. Mga kontrol para sa pagbabago ng mga imahe
  3. Isang caption ng teksto
  4. Awtomatikong mode

Tila isang simpleng listahan ng mga tampok. Awtomatikong isusulong ng awtomatikong mode ang mga imahe sa susunod na sunud-sunod. Narito ang magaspang na sketch na ginawa ko bago sumulat ng anumang code:

Kung nagtataka ka kung bakit abala ang pagpaplano, tingnan ang mga pinakapangit na pagkakamali sa pagprograma sa kasaysayan. Ang proyektong ito ay hindi mapapatay ang sinuman, ngunit mahalaga na magkaroon ng isang matibay na pag-unawa sa mga pamamaraan ng code at pagpaplano bago magtrabaho sa mas malaking code - kahit na ito ay isang magaspang na sketch lamang.



Narito ang paunang HTML na kailangan mo upang makapagsimula. I-save ito sa isang file na may naaangkop na pangalan, tulad ng index.html :







MUO Slideshow










Windmill





Plant





Dog


❮
❯


Narito kung ano ang hitsura ng code:



Medyo basura di ba? Basagin natin ito bago natin ito pagbutihin.

Naglalaman ang code na ito ng 'pamantayan' HTML , ulo , style , iskrip , at katawan mga tag Ang mga bahaging ito ay mahahalagang bahagi ng anumang website. JQuery ay kasama sa pamamagitan ng Google CDN - walang natatangi o espesyal sa ngayon.

Sa loob ng katawan ay isang div na may id ng showContainer . Ito ay isang balot o panlabas na lalagyan upang maiimbak ang slideshow. Mapapabuti mo ito sa paglaon sa pamamagitan ng CSS. Sa loob ng lalagyan na ito, mayroong tatlong mga bloke ng code, bawat isa ay may katulad na layunin.

Ang isang magulang na klase ay tinukoy sa isang pangalan ng klase ng imageContainer :

Ginagamit ito upang mag-imbak ng isang solong slide - isang imahe at caption ang nakaimbak sa loob ng lalagyan na ito. Ang bawat lalagyan ay may natatanging id, na binubuo ng mga character nasa_ at isang numero. Ang bawat lalagyan ay may magkakaibang numero, mula isa hanggang tatlo.

Bilang isang pangwakas na hakbang, isang imahe ay isinangguni, at ang caption ay nakaimbak sa loob ng isang div na may caption klase:



Dog

Nilikha ko ang aking mga imahe na may mga pangalan ng file na numero, at iniimbak ang mga ito sa loob ng isang folder na tinawag Mga imahe . Maaari kang tumawag sa iyo ng anumang gusto mo, sa kondisyon na i-update mo ang HTML upang tumugma.

Kung nais mong magkaroon ng higit pa o mas kaunting mga imahe sa iyong slideshow, kopyahin lamang at i-paste o tanggalin ang mga bloke ng code kasama ang imageContainer klase, naaalala na i-update ang mga pangalan ng file at id kung kinakailangan.

Panghuli, nilikha ang mga pindutan sa pag-navigate. Pinapayagan nito ang gumagamit na mag-navigate sa mga imahe:

❮
❯

Ang mga ito HTML na nilalang ginagamit ang mga code upang maipakita ang mga pasulong at paurong na mga arrow, sa isang katulad na paraan sa kung paano gumagana ang mga icon ng font.

2. Ang CSS

Ngayon na ang pangunahing istraktura ay nasa lugar na, oras na upang tingnan ito maganda . Narito kung ano ang magiging hitsura pagkatapos ng bagong code:

Idagdag ang CSS na ito sa pagitan ng iyong style mga tag:

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;
}

Mas mukhang mas maganda yun ngayon di ba? Tingnan natin ang code.

Gumagamit ako ng mga sample na imahe na lahat 670 x 503 mga pixel , kaya ang slideshow na ito ay halos dinisenyo sa paligid ng mga imahe ng sukat na iyon. Kakailanganin mong ayusin ang CSS nang naaangkop kung nais mong gumamit ng mga imahe ng ibang laki. Inirerekumenda kong baguhin ang laki mo sa laki ng iyong mga imahe - sa iba't ibang mga imahe ng iba't ibang mga sukat ay magiging sanhi ng mga problema sa estilo.

Karamihan ng CSS na ito ay nagpapaliwanag sa sarili. Mayroong code upang tukuyin ang laki ng lalagyan upang maiimbak ang mga imahe, isentro ang lahat sa lahat, tukuyin ang font, kasama ang pindutan at kulay ng teksto. Mayroong ilang mga istilo na maaaring hindi mo naranasan dati:

  1. cursor: pointer - Binabago nito ang cursor mula sa isang arrow sa isang nakaturo na daliri kapag inilipat mo ang iyong cursor sa mga pindutan.
  2. opacity: 0.65 - Pinapataas nito ang transparency ng mga pindutan.
  3. piliin ng gumagamit: wala - Tinitiyak nito na hindi mo maaaring aksidenteng mai-highlight ang teksto sa mga pindutan.

Maaari mong makita ang resulta ng karamihan ng code na ito sa mga pindutan:

Ang pinaka-kumplikadong bahagi dito ay ang kakaibang linya ng pagtingin na ito:

.imageContainer:not(:first-child) {

Maaari itong magmukhang kakaiba, subalit ito ay medyo nagpapaliwanag.

Una, tina-target nito ang anumang mga elemento kasama ang imageContainer klase Ang : hindi () sinasaad ng syntax na dapat ang anumang mga elemento sa loob ng mga braket hindi kasama mula sa istilong ito. Sa wakas, ang :unang anak nakasaad sa syntax na dapat ma-target ng CSS na ito ang anumang elemento na tumutugma sa pangalan pero huwag pansinin ang unang elemento. Ang dahilan para dito ay simple. Dahil ito ay isang slideshow, isang imahe lamang sa bawat oras ang kinakailangan. Itinatago ng CSS na ito ang lahat ng mga imahe mula sa una.

3. Ang JavaScript

Ang pangwakas na piraso ng palaisipan ay ang JavaScript. Ito ang lohika upang aktwal na gawin nang tama ang pag-andar ng slideshow.

Idagdag ang code na ito sa iyong iskrip tag:

$(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;
}
}
});

Maaaring mukhang counter-intuitive ito, ngunit lalaktawan ko ang mga paunang bloke ng code, at dumiretso sa pagpapaliwanag ng code mula sa kalahating paraan - huwag magalala, ipinapaliwanag ko ang lahat ng code!

Kailangan mong tukuyin ang dalawang variable. (Narito kung paano tukuyin ang mga variable sa JavaScript.) Ang mga variable na ito ay maaaring isipin bilang pangunahing mga variable ng pagsasaayos para sa slideshow:

var currentImage = 1;
var totalImages = 3;

Iniimbak nito ang kabuuang bilang ng mga imahe sa slideshow, at ang bilang ng imahe upang magsimula. Kung mayroon kang higit pang mga imahe, baguhin lamang ang kabuuangImages variable sa kabuuang bilang ng mga imahe na mayroon ka.

Ang dalawang pag-andar dagdagan ang Larawan at pagbaba ng Larawan isulong o umatras ang kasalukuyangImage variable. Dapat bang bumaba ang variable na ito kaysa sa isa, o mas mataas sa kabuuangImages , nai-reset ito sa isa o kabuuangImages . Tinitiyak nito na ang loop ay i-loop kapag naabot nito ang dulo.

Bumalik sa code sa simula. Ang 'code' na target na ito ng susunod at nakaraang mga pindutan. Kapag nag-click ka sa bawat pindutan, tumatawag ito sa naaangkop dagdagan o bumaba paraan. Kapag kumpleto na, fades lang nito ang imahe sa screen, at fades sa bagong imahe (tulad ng tinukoy ng kasalukuyangImage variable).

Ang huminto () ang pamamaraan ay binuo sa jQuery. Kinakansela nito ang anumang nakabinbing mga kaganapan. Tinitiyak nito na ang bawat pindutan ng pindutan ay makinis, at nangangahulugang wala kang 100 mga pagpindot sa mga pindutan sa lahat ng naghihintay na maipatupad kung medyo nabaliw ka sa mouse. Ang fadeIn (1) at fadeOut (1) mga pamamaraan fade in o out ang mga imahe tulad ng kinakailangan. Ang numero ay tumutukoy sa tagal ng pagkupas sa milliseconds. Subukang baguhin ito sa isang mas malaking bilang tulad ng 500. Ang isang mas malaking bilang ay nagreresulta sa isang mas mahabang oras ng paglipat. Gayunpaman, pumunta sa napakalayo, at maaari kang magsimulang makakita ng mga kakatwang kaganapan o 'flickers' sa pagitan ng mga pagbabago sa imahe. Narito ang slide sa pagkilos:

Awtomatikong Pagsulong

Ang slideshow na ito ay mukhang maganda ngayon, ngunit mayroong isang huling pagtatapos na kailangan ng paghawak. Ang awtomatikong pagsulong ay isang tampok na talagang magpapasikat sa slideshow na ito. Pagkatapos ng isang itinakdang tagal ng oras, ang bawat imahe ay awtomatikong isusulong sa susunod. Ang gumagamit ay maaari pa ring mag-navigate pasulong o paatras, gayunpaman.

streaming ng mga pelikula nang libre walang pag-sign up

Ito ay isang madaling trabaho sa jQuery. Ang isang timer ay kailangang nilikha upang maipatupad ang iyong code bawat X segundo Sa halip na magsulat ng bagong code, gayunpaman, ang pinakamadaling gawin ay tularan ang isang 'pag-click' sa susunod na pindutan ng imahe, at hayaan ang umiiral na code na gawin ang lahat ng mga gawain.

Narito ang bagong JavaScript na kailangan mo - idagdag ito pagkatapos ng pagbaba ng Larawan pagpapaandar:

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

Walang masyadong nangyayari dito. Ang window.setInterval tatakbo ang pamamaraan ng isang piraso ng code nang regular, tulad ng tinukoy ng oras na tinukoy sa dulo. Ang oras 2500 (sa milliseconds) nangangahulugang ang slideshow na ito ay isusulong bawat 2.5 segundo. Ang isang mas maliit na bilang ay nangangahulugang ang bawat imahe ay susulong sa isang mas mabilis na tulin. Ang mag-click ang paraan ay nagpapalitaw ng mga pindutan upang patakbuhin ang code na para bang na-click ng isang gumagamit ang pindutan gamit ang kanilang mouse.

Kung handa ka na para sa iyong susunod na hamon sa JavaScript, subukang bumuo ng isang website na may isang static na tagabuo ng website tulad ng GatsbyJS, o isang front-end framework tulad ng Vue. Kung ikaw ay isang nag-aaral ng Ruby, ang Jekyll ay isang pagpipilian din. Narito kung paano nakikipaglaban sina Jekyll at GatsbyJS laban sa bawat isa.

Credit sa Larawan: Tharanat Sardsri sa pamamagitan ng Shutterstock.com

Magbahagi Magbahagi Mag-tweet Email Ang 8 Pinakamahusay na Mga Website na Mag-download ng Mga Audiobook nang Libre

Ang Audiobooks ay isang mahusay na mapagkukunan ng libangan, at mas madaling matunaw. Narito ang walong pinakamahusay na website kung saan maaari mong i-download ang mga ito nang libre.

Basahin Susunod Mga Kaugnay na Paksa
  • Programming
  • JavaScript
  • Disenyo ng web
Tungkol sa May-akda Joe Coburn(136 Mga Artikulo Na-publish)

Si Joe ay nagtapos sa Computer Science mula sa University of Lincoln, UK. Siya ay isang propesyonal na developer ng software, at kapag hindi siya lumilipad ng mga drone o sumusulat ng musika, madalas siyang matagpuan na kumukuha ng mga larawan o gumawa ng mga video.

Higit pa Mula kay Joe Coburn

Mag-subscribe sa aming newsletter

Sumali sa aming newsletter para sa mga tip sa tech, pagsusuri, libreng ebook, at eksklusibong deal!

Mag-click dito upang mag-subscribe