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

• मई 4, 2024

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

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



CSS में प्रारंभिक रूपांतरण आसान था क्योंकि केवल बड़ी छवि में स्टाइल की जानकारी थी और इसमें पहले से ही एक था आईडी विशेषता जो जावास्क्रिप्ट प्रयोजनों के लिए इस्तेमाल की जा रही थी।

#largeImage {
सीमा: 2px ठोस काला;
चौड़ाई: 544px;
ऊंचाई: 408px;
}

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

img.thumbs {
सीमा: कोई नहीं;
चौड़ाई: 40 पीएक्स;
ऊंचाई: 40 पीएक्स;
}

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

.slideshow {
ऊंचाई: 408px;
अधिकतम ऊंचाई: 408px;
}

अंत में मैंने चयनित थंबनेल के लिए एक शैली बनाई। मैंने फैसला किया कि मैं चाहता था कि मेरा चयनित थंबनेल अर्ध-पारदर्शी हो और एक संकीर्ण लाल सीमा हो। चूंकि इस समय केवल एक छवि का चयन किया जाएगा, इसलिए मैंने इस उद्देश्य के लिए "वर्तमान" नामक एक आईडी का उपयोग करने का निर्णय लिया। CSS का उपयोग करने का लाभ यह है कि मैं कोड को बदले बिना किसी भी समय इसे कैसे बदल सकता हूं। शैली इस तरह दिखती है:

img # वर्तमान {
सीमा: 1px ठोस लाल;
फिल्टर: अल्फा (अस्पष्टता = 50);
-moz-अस्पष्टता: 0.5;
अपारदर्शिता: 0.5;
}

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

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









हमने अपना जावास्क्रिप्ट नहीं बदला है, इसलिए स्लाइड शो अभी भी काम करता है, लेकिन अब हमारे पास अधिक स्टाइल है और हमारी प्रस्तुति हमारे HTML और जावास्क्रिप्ट से अलग है। हालाँकि, हमें एक समस्या है, जबकि शुरू में चयनित थंबनेल लाल सीमा के साथ अर्ध-पारदर्शी है, यह उस तरह से रहता है जब हम छवियों को बदलते हैं। इसे ठीक करने के लिए, हमें अपने पुराने मित्र जावास्क्रिप्ट पर वापस जाना होगा।

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

वीडियो निर्देश: Card Throwing Trick Shots | Dude Perfect (मई 2024).