3 आसान चरणों में जावास्क्रिप्ट स्लाइड शो कैसे बनाएं

यदि आपने हमारे गाइड को पढ़ा है वेबसाइट कैसे बनाये , आप सोच रहे होंगे कि अपने कौशल में सुधार के लिए आगे क्या करना चाहिए। एक फोटो स्लाइड शो बनाना आश्चर्यजनक रूप से आसान काम है, और एक जो आपको प्रोग्रामिंग नौकरी पाने के लिए आवश्यक मूल्यवान कौशल सिखा सकता है।

आज मैं आपको दिखाऊंगा कि स्क्रैच से जावास्क्रिप्ट स्लाइड शो कैसे बनाया जाता है। चलो ठीक अंदर कूदो!

आवश्यक शर्तें

कोडिंग शुरू करने से पहले आपको कुछ चीजें जाननी होंगी। एक उपयुक्त वेब ब्राउज़र और अपनी पसंद के टेक्स्ट एडिटर के साथ (मेरा सुझाव है उदात्त पाठ ), आपको इसके साथ कुछ अनुभव की आवश्यकता होगी एचटीएमएल , सीएसएस , जावास्क्रिप्ट , तथा jQuery .

यदि आपको अपने कौशल पर इतना भरोसा नहीं है, तो सुनिश्चित करें कि आपने दस्तावेज़ ऑब्जेक्ट मॉडल का उपयोग करने के लिए हमारी मार्गदर्शिका और सीएसएस सीखने के लिए इन युक्तियों को पढ़ा है। यदि आप जावास्क्रिप्ट के साथ आश्वस्त हैं लेकिन पहले कभी jQuery का उपयोग नहीं किया है, तो jQuery के लिए हमारी मूल मार्गदर्शिका देखें।

1. आरंभ करना

इस स्लाइड शो में कई विशेषताओं की आवश्यकता है:

छवियों के लिए समर्थन
छवियों को बदलने के लिए नियंत्रण
एक टेक्स्ट कैप्शन
स्वचालित मोड

यह सुविधाओं की एक साधारण सूची लगता है। स्वचालित मोड स्वचालित रूप से अनुक्रम में छवियों को अगले एक पर आगे बढ़ा देगा। यहाँ किसी भी कोड को लिखने से पहले मैंने जो रफ स्केच किया है:

यदि आप सोच रहे हैं कि योजना बनाने में परेशानी क्यों है, तो इतिहास की इन सबसे खराब प्रोग्रामिंग गलतियों पर एक नज़र डालें। इस परियोजना से किसी की जान नहीं जाएगी, लेकिन बड़े कोड पर काम करने से पहले कोड और योजना प्रक्रियाओं की ठोस समझ होना महत्वपूर्ण है - भले ही यह केवल एक मोटा स्केच ही क्यों न हो।

यहां आरंभिक HTML है जिसे आपको आरंभ करने की आवश्यकता है। इसे किसी उपयुक्त नाम वाली फ़ाइल में सहेजें, जैसे index.html :

  
  
  
  
  
  
 MUO Slideshow  
  
  
  
  
  
  
  
  
    
  
 Windmill  
  
  
  
    
  
 Plant  
  
  
  
    
  
 Dog  
  
  
 ❮  
 ❯

यहाँ कोड कैसा दिखता है:

यह थोड़ा बकवास है ना? आइए इसे सुधारने से पहले इसे तोड़ दें।

इस कोड में 'मानक' है एचटीएमएल , सिर , अंदाज , लिपि , तथा तन टैग। ये भाग किसी भी वेबसाइट के आवश्यक घटक हैं। jQuery Google सीडीएन के माध्यम से शामिल है -- अब तक कुछ भी अनोखा या विशेष नहीं है।

शरीर के अंदर की एक आईडी के साथ एक div है शोकंटेनर . यह स्लाइड शो को स्टोर करने के लिए एक रैपर या बाहरी कंटेनर है। आप इसे बाद में CSS के साथ सुधारेंगे। इस कंटेनर के अंदर कोड के तीन ब्लॉक हैं, जिनमें से प्रत्येक का उद्देश्य समान है।

एक मूल वर्ग को के वर्ग नाम से परिभाषित किया गया है छवि कंटेनर :

इसका उपयोग एकल स्लाइड को संग्रहीत करने के लिए किया जाता है - इस कंटेनर के अंदर एक छवि और कैप्शन संग्रहीत किया जाता है। प्रत्येक कंटेनर की एक अद्वितीय आईडी होती है, जिसमें वर्ण शामिल होते हैं में_ और एक संख्या। प्रत्येक कंटेनर की एक अलग संख्या होती है, एक से तीन तक।

अंतिम चरण के रूप में, एक छवि को संदर्भित किया जाता है, और कैप्शन को एक div के अंदर संग्रहीत किया जाता है शीर्षक वर्ग:

Dog

मैंने अपनी छवियों को संख्यात्मक फ़ाइल नामों के साथ बनाया है, और उन्हें एक फ़ोल्डर के अंदर संग्रहीत किया है जिसे कहा जाता है इमेजिस . आप अपनी पसंद की कोई भी चीज़ कॉल कर सकते हैं, बशर्ते आप मिलान करने के लिए HTML को अपडेट करें।

यदि आप अपने स्लाइड शो में अधिक या कम छवियां रखना चाहते हैं, तो बस कोड के ब्लॉक को कॉपी और पेस्ट या हटा दें छवि कंटेनर कक्षा, फ़ाइल नाम और आईडी को आवश्यकतानुसार अपडेट करना याद रखना।

अंत में, नेविगेशन बटन बनाए जाते हैं। ये उपयोगकर्ता को छवियों के माध्यम से नेविगेट करने की अनुमति देते हैं:

 ❮  
 ❯

इन एचटीएमएल इकाई कोड का उपयोग आगे और पीछे के तीरों को प्रदर्शित करने के लिए किया जाता है, ठीक उसी तरह जैसे कि आइकन फोंट कैसे काम करते हैं।

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

यह अब बहुत बेहतर लग रहा है? आइए कोड पर एक नज़र डालें।

मैं नमूना छवियों का उपयोग कर रहा हूं जो सभी हैं ६७० x ५०३ पिक्सेल , इसलिए यह स्लाइड शो ज्यादातर उस आकार की छवियों के आसपास डिज़ाइन किया गया है। यदि आप किसी भिन्न आकार की छवियों का उपयोग करना चाहते हैं, तो आपको CSS को उचित रूप से समायोजित करने की आवश्यकता होगी। मैं अनुशंसा करता हूं कि आप अपनी छवियों को मिलान करने वाले आकारों में आकार दें -- विभिन्न आयामों की विभिन्न छवियां स्टाइलिंग समस्याओं का कारण बनेंगी।

अधिकांश इस सीएसएस की आत्म व्याख्यात्मक है। छवियों को स्टोर करने के लिए कंटेनर के आकार को परिभाषित करने के लिए कोड है, सब कुछ केंद्र में संरेखित करें, फ़ॉन्ट निर्दिष्ट करें, बटन और टेक्स्ट रंग के साथ। ऐसी कुछ शैलियाँ हैं जो आपने पहले नहीं देखी होंगी:

कर्सर: सूचक - जब आप अपने कर्सर को बटनों पर ले जाते हैं तो यह कर्सर को तीर से इंगित उंगली में बदल देता है।
अस्पष्टता: 0.65 - इससे बटनों की पारदर्शिता बढ़ती है।
उपयोगकर्ता-चयन: कोई नहीं - यह सुनिश्चित करता है कि आप गलती से बटन पर टेक्स्ट को हाइलाइट नहीं कर सकते।

आप इस कोड के अधिकांश परिणाम बटनों में देख सकते हैं:

यहाँ सबसे जटिल हिस्सा यह अजीब दिखने वाली रेखा है:

.imageContainer:not(:first-child) {

यह काफी असामान्य लग सकता है, हालांकि यह काफी आत्म व्याख्यात्मक है।

सबसे पहले, यह किसी भी तत्व को लक्षित करता है छवि कंटेनर कक्षा। NS :नहीं() सिंटैक्स बताता है कि कोष्ठक के अंदर कोई भी तत्व होना चाहिए छोड़ा गया इस शैली से। अंततः :पहला बच्चा वाक्यविन्यास बताता है कि इस सीएसएस को नाम से मेल खाने वाले किसी भी तत्व को लक्षित करना चाहिए लेकिन पहले तत्व को अनदेखा करें। इतना सरल होने का कारण। चूंकि यह एक स्लाइड शो है, इसलिए एक समय में केवल एक छवि की आवश्यकता होती है। यह सीएसएस पहले वाले के अलावा सभी छवियों को छुपाता है।

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;

ये स्लाइड शो में छवियों की कुल संख्या और शुरू करने के लिए छवि की संख्या संग्रहीत करते हैं। यदि आपके पास अधिक छवियां हैं, तो बस बदलें कुल चित्र आपके पास छवियों की कुल संख्या के लिए परिवर्तनशील।

दो कार्य वृद्धि छवि तथा कमी छवि आगे बढ़ना या पीछे हटना वर्तमान छवि चर। क्या यह चर एक से कम या इससे अधिक जाना चाहिए कुल चित्र , यह एक पर रीसेट हो जाता है या कुल चित्र . यह सुनिश्चित करता है कि स्लाइड शो अंत तक पहुंचने के बाद लूप होगा।

शुरुआत में कोड पर वापस जाएं। यह कोड अगले और पिछले बटनों को 'लक्षित' करता है। जब आप प्रत्येक बटन पर क्लिक करते हैं, तो यह उपयुक्त को कॉल करता है बढ़ोतरी या कमी तरीके। एक बार पूरा हो जाने पर, यह बस स्क्रीन पर छवि को फीका कर देता है, और नई छवि में फीका पड़ जाता है (जैसा कि द्वारा परिभाषित किया गया है) वर्तमान छवि चर)।

NS विराम() विधि jQuery में बनाया गया है। यह किसी भी लंबित ईवेंट को रद्द कर देता है। यह सुनिश्चित करता है कि प्रत्येक बटन प्रेस सुचारू है, और इसका मतलब है कि आपके पास 100 बटन नहीं हैं जो सभी निष्पादित होने की प्रतीक्षा कर रहे हैं यदि आप माउस पर थोड़ा पागल हो जाते हैं। NS फ़ेडइन (1) तथा फेडआउट(1) विधियाँ आवश्यकतानुसार छवियों में या बाहर फीकी पड़ जाती हैं। संख्या मिलीसेकंड में फ़ेड की अवधि निर्दिष्ट करती है। इसे 500 जैसी बड़ी संख्या में बदलने का प्रयास करें। एक बड़ी संख्या के परिणामस्वरूप लंबा संक्रमण समय लगता है। हालाँकि, बहुत दूर जाएँ, और आप छवि परिवर्तनों के बीच अजीब घटनाएँ या 'झिलमिलाहट' देखना शुरू कर सकते हैं। यहां कार्रवाई में स्लाइड शो है:

स्वचालित उन्नति

यह स्लाइड शो अब बहुत अच्छा लग रहा है, लेकिन एक अंतिम परिष्करण स्पर्श की आवश्यकता है। स्वचालित उन्नति एक ऐसी विशेषता है जो वास्तव में इस स्लाइड शो को चमकदार बनाएगी। समय की एक निश्चित अवधि के बाद, प्रत्येक छवि स्वचालित रूप से अगले एक पर आगे बढ़ेगी। हालाँकि, उपयोगकर्ता अभी भी आगे या पीछे नेविगेट कर सकता है।

मैं प्रेषक द्वारा जीमेल कैसे छाँट सकता हूँ?

यह jQuery के साथ एक आसान काम है। आपके कोड को हर बार निष्पादित करने के लिए एक टाइमर बनाने की आवश्यकता है एक्स सेकंड। हालांकि, नया कोड लिखने के बजाय, सबसे आसान काम अगले छवि बटन पर 'क्लिक' का अनुकरण करना है, और मौजूदा कोड को सभी काम करने देना है।

यहां आपको नई जावास्क्रिप्ट की आवश्यकता है -- इसके बाद इसे जोड़ें कमी छवि समारोह:

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

यहां बहुत कुछ नहीं चल रहा है। NS window.setInterval विधि नियमित रूप से कोड का एक टुकड़ा चलाएगी, जैसा कि अंत में निर्दिष्ट समय द्वारा परिभाषित किया गया है। समय 2500 (मिलीसेकंड में) का मतलब है कि यह स्लाइड शो हर 2.5 सेकंड में आगे बढ़ेगा। एक छोटी संख्या का मतलब है कि प्रत्येक छवि तेज गति से आगे बढ़ेगी। NS क्लिक विधि कोड को चलाने के लिए बटन को ट्रिगर करती है जैसे कि किसी उपयोगकर्ता ने अपने माउस से बटन पर क्लिक किया हो।

यदि आप अपनी अगली JavaScript चुनौती के लिए तैयार हैं, तो GatsbyJS जैसे स्थिर वेबसाइट निर्माता या Vue जैसे फ्रंट-एंड फ्रेमवर्क के साथ एक वेबसाइट बनाने का प्रयास करें। यदि आप रूबी सीखने वाले हैं, तो जेकिल भी एक विकल्प है। यहां बताया गया है कि कैसे Jekyll और GatsbyJS एक दूसरे के खिलाफ हैं।

छवि क्रेडिट: शटरस्टॉक डॉट कॉम के माध्यम से थरानत सरदश्री

साझा करना साझा करना कलरव ईमेल मुफ्त में ऑडियोबुक डाउनलोड करने के लिए 8 सर्वश्रेष्ठ वेबसाइटें

ऑडियोबुक मनोरंजन का एक बड़ा स्रोत हैं, और पचाने में बहुत आसान हैं। यहां आठ सर्वश्रेष्ठ वेबसाइट हैं जहां आप उन्हें मुफ्त में डाउनलोड कर सकते हैं।

आगे पढ़िए संबंधित विषय

प्रोग्रामिंग
जावास्क्रिप्ट
वेब डिजाइन

लेखक के बारे में जो कोबर्न(136 लेख प्रकाशित)

जो ब्रिटेन के लिंकन विश्वविद्यालय से कंप्यूटर विज्ञान में स्नातक हैं। वह एक पेशेवर सॉफ्टवेयर डेवलपर है, और जब वह ड्रोन नहीं उड़ा रहा है या संगीत नहीं लिख रहा है, तो उसे अक्सर तस्वीरें लेते या वीडियो बनाते हुए पाया जा सकता है।

जो कोबर्न . की अन्य फ़िल्में-टीवी शो

हमारे न्यूज़लेटर की सदस्यता लें

तकनीकी युक्तियों, समीक्षाओं, निःशुल्क ई-पुस्तकों और अनन्य सौदों के लिए हमारे न्यूज़लेटर से जुड़ें!

सब्सक्राइब करने के लिए यहां क्लिक करें