3 సులభ దశల్లో జావాస్క్రిప్ట్ స్లైడ్‌షోను ఎలా నిర్మించాలి

మీరు మా గైడ్‌ని చదివితే వెబ్‌సైట్ ఎలా తయారు చేయాలి , మీ నైపుణ్యాలను మెరుగుపరచడానికి తరువాత ఏమి చేయాలో మీరు ఆలోచిస్తూ ఉండవచ్చు. ఫోటో స్లైడ్‌షోను తయారు చేయడం ఆశ్చర్యకరంగా సులభమైన పని, మరియు ప్రోగ్రామింగ్ ఉద్యోగం పొందడానికి అవసరమైన విలువైన నైపుణ్యాలను మీకు నేర్పించేది.

మొదటి నుండి జావాస్క్రిప్ట్ స్లైడ్‌షోను ఎలా నిర్మించాలో ఈరోజు నేను మీకు చూపిస్తాను. లోపలికి దూకుదాం!

---

---

ముందస్తు అవసరాలు

మీరు కోడింగ్ ప్రారంభించడానికి ముందు మీరు కొన్ని విషయాలు తెలుసుకోవాలి. తగిన వెబ్ బ్రౌజర్ మరియు మీకు నచ్చిన టెక్స్ట్ ఎడిటర్‌తో పాటు (నేను సిఫార్సు చేస్తున్నాను ఉత్కృష్ట వచనం ), మీకు కొంత అనుభవం అవసరం HTML , CSS , జావాస్క్రిప్ట్ , మరియు j క్వెరీ .

మీ నైపుణ్యాలపై మీకు అంత నమ్మకం లేకపోతే, CSS నేర్చుకోవడానికి డాక్యుమెంట్ ఆబ్జెక్ట్ మోడల్ మరియు ఈ చిట్కాలను ఉపయోగించడానికి మా గైడ్‌ని మీరు చదివారని నిర్ధారించుకోండి. మీకు జావాస్క్రిప్ట్‌పై నమ్మకం ఉంది అయితే ఇంతకు ముందు j క్వెరీని ఉపయోగించకపోతే, j క్వెరీకి మా ప్రాథమిక గైడ్‌ని చూడండి.

1. ప్రారంభించడం

ఈ స్లైడ్‌షోకు అనేక ఫీచర్లు అవసరం:

1. చిత్రాలకు మద్దతు
2. చిత్రాలను మార్చడానికి నియంత్రణలు
3. ఒక టెక్స్ట్ క్యాప్షన్
4. ఆటోమేటిక్ మోడ్

ఇది లక్షణాల సాధారణ జాబితాగా కనిపిస్తుంది. స్వయంచాలక మోడ్ స్వయంచాలకంగా చిత్రాలను తదుపరి క్రమంలో తదుపరి క్రమంలో ఉంచుతుంది. ఏదైనా కోడ్ రాయడానికి ముందు నేను చేసిన కఠినమైన స్కెచ్ ఇక్కడ ఉంది:

ప్రణాళికను ఎందుకు ఇబ్బంది పెట్టాలని మీరు ఆలోచిస్తుంటే, చరిత్రలో ఈ చెత్త ప్రోగ్రామింగ్ తప్పులను చూడండి. ఈ ప్రాజెక్ట్ ఎవరినీ చంపదు, కానీ పెద్ద కోడ్‌పై పని చేయడానికి ముందు కోడ్ మరియు ప్లానింగ్ విధానాలపై ఖచ్చితమైన అవగాహన కలిగి ఉండటం చాలా ముఖ్యం - ఇది కేవలం స్కెచ్ మాత్రమే అయినప్పటికీ.

---

---

మీరు ప్రారంభించడానికి అవసరమైన ప్రారంభ HTML ఇక్కడ ఉంది. తగిన పేరుతో ఉన్న ఫైల్‌లో దీన్ని సేవ్ చేయండి index.html :







MUO Slideshow










Windmill





Plant





Dog


❮
❯




కోడ్ ఎలా ఉంటుందో ఇక్కడ ఉంది:

---

---

ఇది కొంచెం చెత్తగా ఉంది, కాదా? దాన్ని మెరుగుపరిచే ముందు దాన్ని విచ్ఛిన్నం చేద్దాం.

ఈ కోడ్‌లో 'స్టాండర్డ్' ఉంది HTML , తల , శైలి , స్క్రిప్ట్ , మరియు శరీరం టాగ్లు. ఈ భాగాలు ఏదైనా వెబ్‌సైట్‌కి అవసరమైన భాగాలు. J క్వెరీ Google CDN ద్వారా చేర్చబడింది - ఇప్పటివరకు ప్రత్యేకమైనది లేదా ప్రత్యేకమైనది ఏమీ లేదు.

శరీరం లోపల ఒక id తో ఒక div ఉంది షో కంటైనర్ . స్లైడ్‌షోను నిల్వ చేయడానికి ఇది రేపర్ లేదా బయటి కంటైనర్. మీరు దీనిని తర్వాత CSS తో మెరుగుపరుస్తారు. ఈ కంటైనర్ లోపల, మూడు బ్లాక్స్ కోడ్‌లు ఉన్నాయి, ఒక్కొక్కటి ఒకే విధమైన ఉద్దేశ్యంతో ఉంటాయి.

పేరెంట్ క్లాస్ తరగతి పేరుతో నిర్వచించబడింది ఇమేజ్ కంటైనర్ :

ఇది ఒకే స్లయిడ్‌ను నిల్వ చేయడానికి ఉపయోగించబడుతుంది - ఈ కంటైనర్ లోపల ఒక చిత్రం మరియు శీర్షిక నిల్వ చేయబడుతుంది. ప్రతి కంటైనర్‌లో అక్షరాలతో కూడిన ప్రత్యేకమైన ఐడి ఉంటుంది లో_ మరియు ఒక సంఖ్య. ప్రతి కంటైనర్ ఒకటి నుండి మూడు వరకు వేరే సంఖ్యను కలిగి ఉంటుంది.

చివరి దశగా, ఒక ఇమేజ్ రిఫరెన్స్ చేయబడుతుంది మరియు క్యాప్షన్ ఒక డివ్ లోపల స్టోర్ చేయబడుతుంది శీర్షిక తరగతి:



Dog


నేను నా ఇమేజ్‌లను న్యూమరిక్ ఫైల్ పేర్లతో క్రియేట్ చేసాను మరియు వాటిని ఫోల్డర్ లోపల స్టోర్ చేసాను చిత్రాలు . మీకు సరిపోయేలా HTML అప్‌డేట్ చేసినట్లయితే, మీకు నచ్చిన ఏదైనా మీరు కాల్ చేయవచ్చు.

మీరు మీ స్లైడ్‌షోలో ఎక్కువ లేదా తక్కువ చిత్రాలను కలిగి ఉండాలనుకుంటే, కోడ్ బ్లాక్‌లను కాపీ చేసి అతికించండి లేదా తొలగించండి ఇమేజ్ కంటైనర్ తరగతి, అవసరమైన విధంగా ఫైల్ పేర్లు మరియు ఐడిలను అప్‌డేట్ చేయడం గుర్తుంచుకోండి.

చివరగా, నావిగేషన్ బటన్‌లు సృష్టించబడ్డాయి. ఇవి చిత్రాల ద్వారా నావిగేట్ చేయడానికి వినియోగదారుని అనుమతిస్తాయి:

❮
❯

ఇవి HTML ఎంటిటీ ఐకాన్ ఫాంట్‌లు ఎలా పనిచేస్తాయో అదే విధంగా ఫార్వర్డ్ మరియు బ్యాక్వర్డ్ బాణాలను ప్రదర్శించడానికి కోడ్‌లు ఉపయోగించబడతాయి.

2. CSS

ఇప్పుడు కోర్ స్ట్రక్చర్ స్థానంలో ఉంది, ఇది కనిపించే సమయం వచ్చింది చక్కని . ఈ కొత్త కోడ్ తర్వాత ఇది ఎలా ఉంటుందో ఇక్కడ ఉంది:

మీ మధ్య ఈ CSS ని జోడించండి శైలి టాగ్లు:

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 x 503 పిక్సెల్స్ , కాబట్టి ఈ స్లైడ్ షో ఆ పరిమాణంలోని చిత్రాల చుట్టూ ఎక్కువగా రూపొందించబడింది. మీరు వేరే పరిమాణంలోని చిత్రాలను ఉపయోగించాలనుకుంటే మీరు CSS ని తగిన విధంగా సర్దుబాటు చేయాలి. మీ ఇమేజ్‌లను మ్యాచింగ్ సైజులకు రీసైజ్ చేయమని నేను సిఫార్సు చేస్తున్నాను - విభిన్న కొలతలు కలిగిన వివిధ ఇమేజ్‌లు స్టైలింగ్ సమస్యలను కలిగిస్తాయి.

అత్యంత ఈ CSS స్వీయ వివరణాత్మకమైనది. చిత్రాలను నిల్వ చేయడానికి కంటైనర్ పరిమాణాన్ని నిర్వచించడానికి కోడ్ ఉంది, మధ్యలో ప్రతిదీ సమలేఖనం చేయండి, బటన్ మరియు టెక్స్ట్ రంగుతో పాటు ఫాంట్ పేర్కొనండి. మీరు ఇంతకు ముందు కనిపించని కొన్ని శైలులు ఉన్నాయి:

1. కర్సర్: పాయింటర్ - మీరు మీ కర్సర్‌ని బటన్‌లపైకి తరలించినప్పుడు ఇది కర్సర్‌ని బాణం నుండి చూపుడు వేలికి మారుస్తుంది.
2. అస్పష్టత: 0.65 - ఇది బటన్ల పారదర్శకతను పెంచుతుంది.
3. వినియోగదారు-ఎంపిక: ఏదీ లేదు - మీరు అనుకోకుండా బటన్‌లపై వచనాన్ని హైలైట్ చేయలేరని ఇది నిర్ధారిస్తుంది.

మీరు బటన్‌లలో ఈ కోడ్‌లో ఎక్కువ భాగాన్ని చూడవచ్చు:

ఇక్కడ అత్యంత క్లిష్టమైన భాగం ఈ వింతగా కనిపించే లైన్:

.imageContainer:not(:first-child) {

ఇది చాలా అసాధారణంగా అనిపించవచ్చు, అయితే ఇది చాలా స్వీయ వివరణాత్మకమైనది.

మొదట, ఇది ఏవైనా అంశాలను లక్ష్యంగా చేసుకుంటుంది ఇమేజ్ కంటైనర్ తరగతి. ది : కాదు () బ్రాంటెట్‌ల లోపల ఏదైనా మూలకాలు ఉండాలని వాక్యనిర్మాణం పేర్కొంది మినహాయించబడింది ఈ శైలి నుండి. చివరగా, ది : మొదటి బిడ్డ సింటాక్స్ ఈ CSS పేరుకు సరిపోయే ఏదైనా మూలకాన్ని లక్ష్యంగా చేసుకోవాలని పేర్కొంది కానీ మొదటి మూలకాన్ని విస్మరించండి. దీనికి కారణం సాధారణమైనది. ఇది స్లైడ్ షో కాబట్టి, ఒకేసారి ఒక చిత్రం మాత్రమే అవసరం. ఈ CSS మొదటిది కాకుండా అన్ని చిత్రాలను దాచిపెడుతుంది.

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

ఇది ప్రతికూలంగా అనిపించవచ్చు, కానీ నేను కోడ్ యొక్క ప్రారంభ బ్లాక్‌లను దాటవేస్తాను మరియు కోడ్‌ను సగం దూరం నుండి వివరించడానికి నేరుగా దూకుతాను-చింతించకండి, నేను కోడ్ మొత్తం వివరిస్తాను!

మీరు రెండు వేరియబుల్స్ నిర్వచించాలి. (JavaScript లో వేరియబుల్స్ ఎలా నిర్వచించాలో ఇక్కడ ఉంది.) ఈ వేరియబుల్స్ స్లైడ్ షో కోసం ప్రధాన కాన్ఫిగరేషన్ వేరియబుల్స్‌గా భావించవచ్చు:

var currentImage = 1;
var totalImages = 3;

ఇవి స్లైడ్‌షోలో మొత్తం చిత్రాల సంఖ్యను మరియు ప్రారంభించడానికి ఉన్న చిత్ర సంఖ్యను నిల్వ చేస్తాయి. మీకు మరిన్ని చిత్రాలు ఉంటే, దాన్ని మార్చండి మొత్తం చిత్రాలు మీ వద్ద ఉన్న మొత్తం చిత్రాల సంఖ్యకు వేరియబుల్.

రెండు విధులు పెరుగుదల చిత్రం మరియు క్షీణత చిత్రం ముందస్తు లేదా వెనక్కి ప్రస్తుత చిత్రం వేరియబుల్. ఈ వేరియబుల్ ఒకటి కంటే తక్కువగా ఉండాలా, లేదా అంతకంటే ఎక్కువగా ఉంటే మొత్తం చిత్రాలు , ఇది ఒకటి లేదా రీసెట్ చేయబడుతుంది మొత్తం చిత్రాలు . ఇది స్లైడ్ ముగింపుకు చేరుకున్న తర్వాత లూప్ అవుతుందని నిర్ధారిస్తుంది.

ప్రారంభంలో కోడ్‌కి తిరిగి వెళ్ళు. ఈ కోడ్ తదుపరి మరియు మునుపటి బటన్‌లను 'టార్గెట్ చేస్తుంది'. మీరు ప్రతి బటన్‌పై క్లిక్ చేసినప్పుడు, అది తగినది అని పిలుస్తుంది పెంచు లేదా తగ్గుతాయి పద్ధతులు. పూర్తయిన తర్వాత, అది కేవలం స్క్రీన్‌పై ఉన్న ఇమేజ్‌ని మసకబారుస్తుంది మరియు కొత్త ఇమేజ్‌లో మసకబారుతుంది (నిర్వచించిన విధంగా ప్రస్తుత చిత్రం వేరియబుల్).

ది ఆపు () పద్ధతి j క్వెరీలో నిర్మించబడింది. ఇది ఏదైనా పెండింగ్ ఈవెంట్‌లను రద్దు చేస్తుంది. ఇది ప్రతి బటన్ ప్రెస్ మృదువైనదని నిర్ధారిస్తుంది మరియు మీరు మౌస్‌పై కొంచెం వెర్రిగా ఉంటే అమలు చేయడానికి 100 బటన్‌ల ప్రెస్‌లు లేవు. ది ఫేడ్ఇన్ (1) మరియు ఫేడ్ అవుట్ (1) అవసరమైన విధంగా చిత్రాలలో లేదా వెలుపల పద్ధతులు మసకబారుతాయి. సంఖ్య మిల్లీసెకన్లలో ఫేడ్ వ్యవధిని తెలుపుతుంది. దీనిని 500 వంటి పెద్ద సంఖ్యగా మార్చడానికి ప్రయత్నించండి. పెద్ద సంఖ్యలో ఎక్కువ కాలం పరివర్తన సమయం వస్తుంది. అయితే చాలా దూరం వెళ్లండి, మరియు మీరు చిత్ర మార్పుల మధ్య వింత సంఘటనలు లేదా 'మినుకుమినుకుమనేది' చూడటం ప్రారంభించవచ్చు. చర్యలో ఉన్న స్లైడ్ షో ఇక్కడ ఉంది:

ఆటోమేటిక్ అడ్వాన్స్‌మెంట్

ఈ స్లైడ్‌షో ఇప్పుడు చాలా బాగుంది, కానీ చివరి ఫినిషింగ్ టచ్ అవసరం. స్వయంచాలక పురోగతి అనేది నిజంగా ఈ స్లైడ్‌షోను ప్రకాశింపజేసే లక్షణం. నిర్ణీత వ్యవధి తరువాత, ప్రతి చిత్రం స్వయంచాలకంగా తదుపరి చిత్రానికి చేరుకుంటుంది. అయినప్పటికీ, వినియోగదారు ఇప్పటికీ ముందుకు లేదా వెనుకకు నావిగేట్ చేయవచ్చు.

ప్రారంభకులకు ఉత్తమ ఫోటో ఎడిటింగ్ సాఫ్ట్‌వేర్

J క్వెరీతో ఇది సులభమైన పని. ప్రతి మీ కోడ్‌ను అమలు చేయడానికి టైమర్‌ని సృష్టించడం అవసరం X సెకన్లు. అయితే, కొత్త కోడ్ వ్రాయడానికి బదులుగా, తదుపరి ఇమేజ్ బటన్‌పై 'క్లిక్' అనుకరించడం మరియు ఇప్పటికే ఉన్న కోడ్ అన్ని పనులను చేయనివ్వడం సులభమయిన పని.

మీకు అవసరమైన కొత్త జావాస్క్రిప్ట్ ఇక్కడ ఉంది - తర్వాత దీనిని జోడించండి క్షీణత చిత్రం ఫంక్షన్:

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

ఇక్కడ పెద్దగా ఏమీ జరగడం లేదు. ది window.setInterval చివరలో పేర్కొన్న సమయం ద్వారా నిర్వచించిన విధంగా, పద్ధతి క్రమం తప్పకుండా కోడ్ భాగాన్ని అమలు చేస్తుంది. సమయం 2500 (మిల్లీ సెకన్లలో) అంటే ఈ స్లైడ్ షో ప్రతి 2.5 సెకన్లకు ముందుకొస్తుంది. ఒక చిన్న సంఖ్య అంటే ప్రతి చిత్రం త్వరిత వేగంతో ముందుకు సాగుతుంది. ది క్లిక్ చేయండి యూజర్ వారి మౌస్‌తో బటన్‌ని క్లిక్ చేసినట్లుగా కోడ్‌ని అమలు చేయడానికి పద్ధతి బటన్‌లను ప్రేరేపిస్తుంది.

మీ తదుపరి జావాస్క్రిప్ట్ ఛాలెంజ్ కోసం మీరు సిద్ధంగా ఉంటే, గాట్స్‌బిజెఎస్ వంటి స్టాటిక్ వెబ్‌సైట్ బిల్డర్ లేదా వియు వంటి ఫ్రంట్-ఎండ్ ఫ్రేమ్‌వర్క్‌తో వెబ్‌సైట్‌ను రూపొందించడానికి ప్రయత్నించండి. మీరు రూబీ లెర్నర్ అయితే, జెకిల్ కూడా ఒక ఎంపిక. జెకిల్ మరియు గాట్స్‌బిజెఎస్ ఒకదానికొకటి ఎలా పోటీపడతాయో ఇక్కడ ఉంది.

చిత్ర క్రెడిట్: Shutterstock.com ద్వారా థరనాత్ సర్దశ్రీ

షేర్ చేయండి షేర్ చేయండి ట్వీట్ ఇమెయిల్ ఆడియోబుక్‌లను ఉచితంగా డౌన్‌లోడ్ చేయడానికి 8 ఉత్తమ వెబ్‌సైట్‌లు

ఆడియోబుక్స్ వినోదానికి గొప్ప మూలం మరియు జీర్ణించుకోవడం చాలా సులభం. మీరు ఉచితంగా డౌన్‌లోడ్ చేసుకోగల ఎనిమిది ఉత్తమ వెబ్‌సైట్‌లు ఇక్కడ ఉన్నాయి.

తదుపరి చదవండి సంబంధిత అంశాలు

• ప్రోగ్రామింగ్
• జావాస్క్రిప్ట్
• వెబ్ డిజైన్

రచయిత గురుంచి జో కోబర్న్(136 కథనాలు ప్రచురించబడ్డాయి)

జో UK లోని లింకన్ విశ్వవిద్యాలయం నుండి కంప్యూటర్ సైన్స్‌లో గ్రాడ్యుయేట్. అతను ఒక ప్రొఫెషనల్ సాఫ్ట్‌వేర్ డెవలపర్, మరియు అతను డ్రోన్‌లను ఎగురవేయనప్పుడు లేదా సంగీతం వ్రాయనప్పుడు, అతను తరచుగా ఫోటోలు తీయడం లేదా వీడియోలను ఉత్పత్తి చేయడం చూడవచ్చు.

జో కోబర్న్ నుండి మరిన్ని

మా వార్తాలేఖకు సభ్యత్వాన్ని పొందండి

టెక్ చిట్కాలు, సమీక్షలు, ఉచిత ఈబుక్‌లు మరియు ప్రత్యేకమైన డీల్స్ కోసం మా వార్తాలేఖలో చేరండి!

సభ్యత్వం పొందడానికి ఇక్కడ క్లిక్ చేయండి