जावास्क्रिप्ट स्लाइड शो कार्य के साथ

• मई 4, 2024

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

मेरे स्लाइड शो के पिछले संस्करण में, जब कोई उपयोगकर्ता थंबनेल पर क्लिक करता है, तो संबंधित बड़ी छवियां प्रदर्शित होती हैं। मैं जो करना चाहता हूं वह बड़ी छवि को बदलना है, पहले से चयनित छवि के थंबनेल को सामान्य पर वापस जाने के लिए सेट करें और चयनित छवि के लिए विशेष शैली के साथ इस थंबनेल प्रदर्शन को बनाएं। चूँकि मैं अब कई चीजें कर रहा हूं, जब थंबनेल पर क्लिक किया जाता है, तो मैंने अपने सभी कोड को ऑन-लाइन विशेषता पर रखने से स्विच कर दिया है img किसी फ़ंक्शन का उपयोग करने के लिए टैग। जावास्क्रिप्ट फ़ंक्शंस आमतौर पर अंदर जाते हैं सिर HTML का अनुभाग ताकि वे लोड और तैयार हो जाएं जब पृष्ठ का शरीर लोड हो जाए। उन्हें या तो सीधे बीच में डाला जा सकता है लिपि टैग या डाल और एक फ़ाइल और शामिल हैं। छोटे कार्यक्रमों के लिए, या जब मैं सक्रिय रूप से कोडिंग कर रहा हूं, तो मुझे अपना कोड सीधे पृष्ठ पर रखना आसान हो गया है जैसा कि मैंने यहां किया था।

मैं प्रत्येक थंबनेल के लिए एक फ़ंक्शन का उपयोग कर सकता था, लेकिन चूंकि थंबनेल से थंबनेल में सभी परिवर्तन छवि का नाम है और थंबनेल की आईडी (और मैंने आईडी के लिए छवि नाम का उपयोग किया है), मैंने एक एकल फ़ंक्शन लिखा है जो लिया आईडी एक तर्क के रूप में और इसका उपयोग ".jpg" को जोड़कर उपयुक्त छवि नाम बनाने के लिए किया। मैंने अपना फंक्शन बुलाया displayLarge.

समारोह प्रदर्शन (आईडी) {
// बड़ी छवि बदलें
imageName = id + ".jpg";
document.getElementById ( "largeImage") src = imageName।
// पिछले थंबनेल की शैली को डिफ़ॉल्ट पर सेट करें
। Document.getElementById ( "वर्तमान") आईडी = oldID;
// हम इसे बदलने से पहले आईडी पर ध्यान दें
oldID = आईडी
// वर्तमान शैली के साथ वर्तमान के रूप में थंबनेल को चिह्नित करें
document.getElementById (आईडी) .id = "वर्तमान";
}

इस फ़ंक्शन को पहली बार काम करने के लिए, मुझे इसके लिए एक प्रारंभिक परिभाषा भी देनी थी oldIDवह चर जिसका उपयोग मैं वर्तमान में चयनित थंबनेल की मूल आईडी को याद करने के लिए कर रहा हूं। यह सब कोड वेब पेज के हेड सेक्शन में जाता है, ताकि यह पेज लोड होने से पहले लोड हो जाए।

अंत में, मैंने अपने फ़ंक्शन को कॉल करने के लिए थंबनेल के लिए HTML बदल दिया। मेरे स्लाइड शो के लिए HTML अब इस तरह दिखता है:











आप यहां इस कोड का एक कार्यशील उदाहरण देख सकते हैं।

वीडियो निर्देश: Javascript comparison operatos greater than euqal , and less than enqual to in Hindi (मई 2024).