3 எளிதான படிகளில் ஜாவாஸ்கிரிப்ட் ஸ்லைடுஷோவை உருவாக்குவது எப்படி

எங்கள் வழிகாட்டியை நீங்கள் படித்திருந்தால் ஒரு வலைத்தளத்தை உருவாக்குவது எப்படி , உங்கள் திறமைகளை மேம்படுத்த அடுத்து என்ன செய்வது என்று நீங்கள் யோசிக்கலாம். ஒரு புகைப்பட ஸ்லைடுஷோவை உருவாக்குவது வியக்கத்தக்க எளிதான பணியாகும், மேலும் நிரலாக்க வேலைக்குத் தேவையான மதிப்புமிக்க திறன்களை உங்களுக்குக் கற்பிக்கக்கூடிய ஒன்றாகும்.

புதிதாக ஒரு ஜாவாஸ்கிரிப்ட் ஸ்லைடுஷோவை எப்படி உருவாக்குவது என்பதை இன்று நான் உங்களுக்குக் காண்பிக்கிறேன். உடனே குதிப்போம்!

முன்நிபந்தனைகள்

நீங்கள் குறியீட்டைத் தொடங்குவதற்கு முன் சில விஷயங்களை அறிந்து கொள்ள வேண்டும். பொருத்தமான இணைய உலாவி மற்றும் உங்களுக்கு விருப்பமான உரை திருத்தியுடன் (நான் பரிந்துரைக்கிறேன் உன்னத உரை ), உங்களுக்கு சில அனுபவம் தேவை HTML , CSS , ஜாவாஸ்கிரிப்ட் , மற்றும் jQuery .

உங்கள் திறமைகளில் உங்களுக்கு அவ்வளவு நம்பிக்கை இல்லை என்றால், ஆவணப் பொருள் மாதிரியைப் பயன்படுத்துவதற்கான எங்கள் வழிகாட்டி மற்றும் CSS கற்க இந்த உதவிக்குறிப்புகளைப் படிக்கவும். உங்களுக்கு ஜாவாஸ்கிரிப்ட் மீது நம்பிக்கை இருந்தால் ஆனால் இதற்கு முன்பு jQuery ஐ பயன்படுத்தவில்லை என்றால், jQuery க்கான எங்கள் அடிப்படை வழிகாட்டியைப் பாருங்கள்.

1. தொடங்குதல்

இந்த ஸ்லைடுஷோவிற்கு பல அம்சங்கள் தேவை:

படங்களுக்கான ஆதரவு
படங்களை மாற்றுவதற்கான கட்டுப்பாடுகள்
ஒரு உரை தலைப்பு
தானியங்கி முறை

இது அம்சங்களின் எளிய பட்டியலாகத் தெரிகிறது. தானியங்கி பயன்முறை வரிசையில் அடுத்த படத்திற்கு தானாகவே படங்களை முன்னெடுக்கும். எந்தவொரு குறியீடும் எழுதுவதற்கு முன்பு நான் செய்த தோராயமான ஓவியம் இங்கே:

திட்டமிடலை ஏன் தொந்தரவு செய்வது என்று நீங்கள் யோசிக்கிறீர்கள் என்றால், வரலாற்றில் இந்த மோசமான நிரலாக்க தவறுகளைப் பாருங்கள். இந்த திட்டம் யாரையும் கொல்லாது, ஆனால் பெரிய குறியீட்டில் வேலை செய்வதற்கு முன் குறியீடுகள் மற்றும் திட்டமிடல் நடைமுறைகளை உறுதியாக புரிந்துகொள்வது முக்கியம் - இது ஒரு தோராயமான ஓவியமாக இருந்தாலும் கூட.

நீங்கள் தொடங்க வேண்டிய ஆரம்ப HTML இங்கே. பொருத்தமான பெயருடன் ஒரு கோப்பில் இதைச் சேமிக்கவும் index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

குறியீடு எப்படி இருக்கும் என்பது இங்கே:

இது கொஞ்சம் குப்பை அல்லவா? அதை மேம்படுத்துவதற்கு முன் அதை உடைப்போம்.

இந்த குறியீட்டில் 'தரநிலை' உள்ளது HTML , தலை , பாணி , கையால் எழுதப்பட்ட தாள் , மற்றும் உடல் குறிச்சொற்கள். இந்த பகுதிகள் எந்த வலைத்தளத்தின் அத்தியாவசிய கூறுகள். JQuery கூகுள் சிடிஎன் வழியாக சேர்க்கப்பட்டுள்ளது - இதுவரை தனிப்பட்ட அல்லது சிறப்பு எதுவும் இல்லை.

உடலின் உள்ளே ஒரு ஐடியுடன் ஒரு டிவ் உள்ளது காட்சி கொள்கலன் . ஸ்லைடுஷோவை சேமிக்க இது ஒரு போர்த்தி அல்லது வெளிப்புற கொள்கலன். CSS மூலம் இதை நீங்கள் பின்னர் மேம்படுத்தலாம். இந்த கொள்கலனுக்குள், மூன்று தொகுதிகள் உள்ளன, ஒவ்வொன்றும் ஒரே நோக்கத்துடன்.

ஒரு பெற்றோர் வகுப்பு ஒரு வகுப்பு பெயருடன் வரையறுக்கப்படுகிறது படக் கொள்கலன் :

ஒற்றை ஸ்லைடை சேமிக்க இது பயன்படுகிறது - இந்த கொள்கலனில் ஒரு படமும் தலைப்பும் சேமிக்கப்படும். ஒவ்வொரு கொள்கலனுக்கும் தனித்துவமான ஐடி உள்ளது, இதில் எழுத்துக்கள் உள்ளன இல்_ மற்றும் ஒரு எண். ஒவ்வொரு கொள்கலனும் ஒன்று முதல் மூன்று வரை வெவ்வேறு எண்ணைக் கொண்டுள்ளது.

இறுதி கட்டமாக, ஒரு படம் குறிப்பிடப்படுகிறது, மேலும் தலைப்பு ஒரு டிவிக்குள் சேமிக்கப்படுகிறது தலைப்பு வர்க்கம்:

Dog

நான் என் படங்களை எண் கோப்பு பெயர்களுடன் உருவாக்கி, அவற்றை ஒரு கோப்புறையில் சேமித்தேன் படங்கள் . நீங்கள் பொருத்தமாக HTML புதுப்பிக்கப்பட்டால், நீங்கள் விரும்பும் எதையும் நீங்கள் அழைக்கலாம்.

உங்கள் ஸ்லைடுஷோவில் அதிகமாகவோ அல்லது குறைவாகவோ படங்களை வைத்திருக்க விரும்பினால், குறியீட்டின் தொகுதிகளை நகலெடுத்து ஒட்டவும் அல்லது நீக்கவும் படக் கொள்கலன் வகுப்பு, கோப்பு பெயர்கள் மற்றும் ஐடிகளை தேவைக்கேற்ப புதுப்பிக்க நினைவிருக்கிறது.

இறுதியாக, வழிசெலுத்தல் பொத்தான்கள் உருவாக்கப்படுகின்றன. இவை பயனர் படங்களின் வழியாக செல்ல அனுமதிக்கிறது:

 ❮  
 ❯

இவை HTML நிறுவனம் குறியீடுகள் முன்னோக்கி மற்றும் பின்னோக்கி அம்புகளைக் காட்டப் பயன்படுகின்றன, ஐகான் எழுத்துருக்கள் எவ்வாறு செயல்படுகின்றன என்பதைப் போலவே.

2. சிஎஸ்எஸ்

இப்போது முக்கிய அமைப்பு இடத்தில் உள்ளது, அதை பார்க்க நேரம் வந்துவிட்டது அழகான . இந்தப் புதிய குறியீட்டிற்குப் பிறகு இது எப்படி இருக்கும்:

உங்களுக்கு இடையே இந்த 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 சுய விளக்கமளிக்கிறது. படங்களை சேமிப்பதற்காக கொள்கலனின் அளவை வரையறுக்க குறியீடு உள்ளது, எல்லாவற்றையும் மையமாக சீரமைக்கவும், பொத்தானை மற்றும் உரை வண்ணத்துடன் எழுத்துருவை குறிப்பிடவும். நீங்கள் முன்பு காணாத சில பாணிகள் உள்ளன:

கர்சர்: சுட்டிக்காட்டி உங்கள் கர்சரை பொத்தான்களுக்கு மேல் நகர்த்தும்போது இது கர்சரை அம்புக்குறியிலிருந்து சுட்டி விரலுக்கு மாற்றுகிறது.
ஒளிபுகாநிலை: 0.65 - இது பொத்தான்களின் வெளிப்படைத்தன்மையை அதிகரிக்கிறது.
பயனர் தேர்வு: இல்லை - நீங்கள் தற்செயலாக பொத்தான்களில் உரையை முன்னிலைப்படுத்த முடியாது என்பதை இது உறுதி செய்கிறது.

இந்த குறியீட்டின் முடிவை பொத்தான்களில் காணலாம்:

இங்கே மிகவும் சிக்கலான பகுதி இந்த விசித்திரமான கோடு:

.imageContainer:not(:first-child) {

இது மிகவும் அசாதாரணமாகத் தோன்றலாம், இருப்பினும் இது மிகவும் சுய விளக்கமாகும்.

முதலில், இது எந்த உறுப்புகளையும் குறிவைக்கிறது படக் கொள்கலன் வர்க்கம். தி : இல்லை () அடைப்புக்குறிக்குள் உள்ள எந்த உறுப்புகளும் இருக்க வேண்டும் என்று தொடரியல் கூறுகிறது விலக்கப்பட்டது இந்த பாணியில் இருந்து. இறுதியாக, தி : முதல் குழந்தை இந்த 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;

இவை ஸ்லைடுஷோவில் மொத்த படங்களின் எண்ணிக்கையையும், தொடங்க வேண்டிய படத்தின் எண்ணிக்கையையும் சேமிக்கிறது. உங்களிடம் அதிக படங்கள் இருந்தால், வெறுமனே மாற்றவும் மொத்த படங்கள் உங்களிடம் உள்ள மொத்த படங்களின் எண்ணிக்கைக்கு மாறுபடும்.

இரண்டு செயல்பாடுகள் படத்தை அதிகரிக்கவும் மற்றும் குறைவு படம் முன்கூட்டியே அல்லது பின்வாங்க தற்போதைய படம் மாறி. இந்த மாறி ஒன்றுக்கு குறைவாகவோ அல்லது அதை விட அதிகமாகவோ செல்ல வேண்டும் மொத்த படங்கள் , அது ஒன்று அல்லது மீட்டமைக்கப்படும் மொத்த படங்கள் . இது ஸ்லைடுஷோ முடிவை அடைந்தவுடன் சுழலும் என்பதை உறுதி செய்கிறது.

தொடக்கத்தில் குறியீட்டிற்கு திரும்பவும். இந்த குறியீடு அடுத்த மற்றும் முந்தைய பொத்தான்களை 'குறிவைக்கிறது'. நீங்கள் ஒவ்வொரு பொத்தானையும் கிளிக் செய்யும்போது, அது பொருத்தமானதை அழைக்கிறது அதிகரி அல்லது குறைவு முறைகள். முடிந்ததும், அது திரையில் உள்ள படத்தை வெறுமனே மங்கச் செய்து, புதிய படத்தில் மங்குகிறது (வரையறுக்கப்பட்டபடி தற்போதைய படம் மாறி).

தி நிறுத்து () முறை jQuery இல் கட்டமைக்கப்பட்டுள்ளது. இது நிலுவையில் உள்ள நிகழ்வுகளை ரத்து செய்கிறது. இது ஒவ்வொரு பொத்தானை அழுத்தவும் மென்மையாக இருப்பதை உறுதிசெய்கிறது, மேலும் நீங்கள் மவுஸில் கொஞ்சம் பைத்தியம் பிடித்தால் இயக்க 100 காத்திருப்பு பொத்தான்கள் இல்லை. தி fadeIn (1) மற்றும் ஃபேட் அவுட் (1) தேவைக்கேற்ப படங்களில் உள்ள முறைகள் மங்குகின்றன. எண் மில்லி விநாடிகளில் மங்கலின் காலத்தைக் குறிப்பிடுகிறது. இதை 500 போன்ற பெரிய எண்ணாக மாற்ற முயற்சிக்கவும். ஒரு பெரிய எண் நீண்ட கால மாற்றத்திற்கு வழிவகுக்கிறது. எவ்வாறாயினும், வெகுதூரம் செல்லுங்கள், பட மாற்றங்களுக்கு இடையில் நீங்கள் விசித்திரமான நிகழ்வுகள் அல்லது 'ஃப்ளிக்கர்கள்' பார்க்கத் தொடங்கலாம். செயலில் உள்ள ஸ்லைடுஷோ இதோ:

தானியங்கி முன்னேற்றம்

இந்த ஸ்லைடுஷோ இப்போது மிகவும் நன்றாக இருக்கிறது, ஆனால் கடைசியாக ஒரு இறுதிக் காட்சி தேவை. தானியங்கி முன்னேற்றம் என்பது இந்த ஸ்லைடுஷோவை பிரகாசிக்க வைக்கும் அம்சமாகும். ஒரு குறிப்பிட்ட காலத்திற்குப் பிறகு, ஒவ்வொரு படமும் தானாகவே அடுத்த படத்திற்கு முன்னேறும். இருப்பினும், பயனர் இன்னும் முன்னோக்கி அல்லது பின்னோக்கி செல்லலாம்.

யூடியூப் சேனலைத் தொடங்க உங்களுக்கு என்ன உபகரணங்கள் தேவை

இது jQuery உடன் எளிதான வேலை. உங்கள் குறியீட்டைச் செயல்படுத்த ஒரு டைமர் உருவாக்கப்பட வேண்டும் எக்ஸ் வினாடிகள் இருப்பினும், புதிய குறியீட்டை எழுதுவதற்குப் பதிலாக, அடுத்த படப் பொத்தானை ஒரு 'கிளிக்' செய்வதே எளிதான காரியமாகும், மேலும் ஏற்கனவே உள்ள குறியீட்டை அனைத்து வேலைகளையும் செய்ய விடுங்கள்.

உங்களுக்குத் தேவையான புதிய ஜாவாஸ்கிரிப்ட் இதோ - பிறகு இதைச் சேர்க்கவும் குறைவு படம் செயல்பாடு:

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

இங்கு அதிகம் நடப்பதில்லை. தி window.setInterval இறுதியில் குறிப்பிடப்பட்ட நேரத்தால் வரையறுக்கப்பட்டபடி, ஒரு குறியீட்டை தவறாமல் இயக்கும். நேரம் 2500 (மில்லி விநாடிகளில்) இந்த ஸ்லைடுஷோ ஒவ்வொரு 2.5 வினாடிக்கும் முன்னேறும். ஒரு சிறிய எண் என்றால் ஒவ்வொரு படமும் விரைவான வேகத்தில் முன்னேறும். தி கிளிக் செய்யவும் பயனர் தங்கள் சுட்டியுடன் பொத்தானைக் கிளிக் செய்ததைப் போல குறியீட்டை இயக்க முறை பொத்தான்களைத் தூண்டுகிறது.

உங்கள் அடுத்த ஜாவாஸ்கிரிப்ட் சவாலுக்கு நீங்கள் தயாராக இருந்தால், GatsbyJS போன்ற நிலையான வலைத்தள பில்டர் அல்லது Vue போன்ற முன்-இறுதி கட்டமைப்பைக் கொண்டு ஒரு வலைத்தளத்தை உருவாக்க முயற்சிக்கவும். நீங்கள் ரூபி கற்றவராக இருந்தால், ஜெகில் ஒரு விருப்பமும் கூட. ஜெகில் மற்றும் கேட்ஸ்பிஜெஎஸ் ஒருவருக்கொருவர் எப்படி எதிர் கொள்கிறார்கள் என்பது இங்கே.

படக் கடன்: Shutterstock.com வழியாக தரனாத் சார்ட்ஸ்ரி

பகிர் பகிர் ட்வீட் மின்னஞ்சல் ஆடியோபுக்குகளை இலவசமாக பதிவிறக்கம் செய்ய 8 சிறந்த இணையதளங்கள்

ஆடியோ புத்தகங்கள் ஒரு சிறந்த பொழுதுபோக்கு ஆதாரமாகும், மேலும் ஜீரணிக்க மிகவும் எளிதானது. எட்டு சிறந்த இணையதளங்களை நீங்கள் இலவசமாக பதிவிறக்கம் செய்யலாம்.

அடுத்து படிக்கவும் தொடர்புடைய தலைப்புகள்

நிரலாக்க
ஜாவாஸ்கிரிப்ட்
வலை வடிவமைப்பு

எழுத்தாளர் பற்றி ஜோ கோபர்ன்(136 கட்டுரைகள் வெளியிடப்பட்டன)

ஜோ இங்கிலாந்தின் லிங்கன் பல்கலைக்கழகத்தில் கணினி அறிவியலில் பட்டதாரி. அவர் ஒரு தொழில்முறை மென்பொருள் டெவலப்பர், அவர் ட்ரோன்களை பறக்காதபோது அல்லது இசை எழுதாதபோது, அவர் அடிக்கடி புகைப்படம் எடுப்பதை அல்லது வீடியோக்களை தயாரிப்பதை காணலாம்.

ஜோ கோபர்னிடமிருந்து மேலும்

எங்கள் செய்திமடலுக்கு குழுசேரவும்

தொழில்நுட்ப குறிப்புகள், மதிப்புரைகள், இலவச மின் புத்தகங்கள் மற்றும் பிரத்யேக ஒப்பந்தங்களுக்கு எங்கள் செய்திமடலில் சேரவும்!

குழுசேர இங்கே சொடுக்கவும்