JQuery पुस्तकालय: आफ्नो वेबसाइट को लागि Sliders

समय को खण्ड र वेब डिजाइन को क्षेत्र परिवर्तन र आवश्यकता / सामाग्री साइटहरु प्रयोगकर्ताहरूको आवश्यकताहरू प्रविधिको विकास संग। यो ज्यादातर विषयगत तस्बिरहरू एउटा सानो नम्बर पाठ सामग्री थियो पहिले भने, आज यो ग्राफिक को मूख्य घटक छ। यो तपाईं चाँडै सबैभन्दा आवश्यक र उपयोगी जानकारी प्राप्त गर्न, र लामो पदहरू पढेर समय बर्बाद छैन अनुमति दिन्छ। यो झन् लोकप्रिय र, वास्तवमा जडानमा, वेब पृष्ठको आवश्यक तत्व Sliders छन्। तस्बिरहरू देखि लिंक गर्न - तिनीहरूले सामग्री बदलिने संग ब्लक छन्। JQuery पुस्तकालय प्रयोग - दिइएको वेब वस्तु थप्न एक आधुनिक तरिका हो। यो उपकरण सिर्जना sliders, एक, सहज प्रयोग गर्न सजिलो प्राप्त गर्न र धेरै प्रभावशाली देखिन्छ। अर्को हामी कसरी आफ्नै वेब पृष्ठहरू यी तत्व बनाउन हेर्न। मानकीकृत उपकरण को एक पर्याप्त मात्रामा धन्यवाद, यो jQuery स्लाइडर-प्रकार र विविध सामग्री लागू गर्न सम्भव छ।

कसरी वेब पेज मा एक स्लाइडर थप्न?

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

HTML कोड मा: आफैलाई एक स्लाइडर सिर्जना

पहिलो, जहाँ सुरु गर्न - स्लाइडर भविष्य लेआउट दर्ता छ।

1. HTML-फाइल स्लाइड शो एकाइ, हाम्रो स्लाइडहरू सबै समावेश हुनेछ जो (चित्र, आदि) मा स्थापित।
2. यसलाई जो प्रत्येक अनुच्छेद छुट्टै स्लाइड भण्डारण, उल सूची राख्नु।

हामी CSS संग काम गर्दै

त्यसपछि हामी CSS-कागजात प्रयोग गरेर चाहेको शैली को विशेषताहरु यो लागू हुन्छ। यसलाई राम्ररी काम गर्न हाम्रो सामग्री jQuery स्लाइडर आयातित गर्न आवश्यक छ र सही नजर थियो। यो चरण मा, हामी निम्न कार्यहरू सामना गर्दै:

• बनाउन स्लाइड शो एकाइ सही क्षण स्लाइड (वा तस्वीर सामग्री) मा, प्रदर्शन गर्दछ मात्र एक, र बाँकी लुकेको थियो पक्का;
• स्लाइड (दायाँ बायाँ) अन्य पछि एक व्यवस्था;
• जो स्लाइडहरू भण्डारण गर्दछ चल्ने (बायाँ र दायाँ) उल-कन्टेनर, के।

यो गर्न, CSS-फाइल निम्न विकल्पहरू सेट:

• स्लाइड शो को लागि: ओभरफ्लो-एक्स - स्क्रोल, ओभरफ्लो-वाई - लुकाइएको:
• उल लागि: फ्लोट - बाँकी।

पनि चौडाई को मापदण्डहरु (चौडाई), उचाइ (उचाइ), पृष्ठभूमि (पृष्ठभूमि) र यसको अगाडी सेट गर्न सक्नुहुन्छ।

हामी jQuery मा यो कोड राख्न

एचटीएमएल र CSS सबै आवश्यक परिवर्तनहरू गरेका छन्। यो jQuery कोड, Sliders, निम्न मापदण्डहरु हुनुपर्छ जसको लागि मामला रहन्छ:

• स्लाइडहरू एक निश्चित समय अन्तराल संग प्रत्येक अन्य सफल हुनुपर्छ;
• जब तपाईं hover माउस सूचक आफ्नो आन्दोलन बन्द गर्नुपर्छ।

slidewidth र slidertime (स्लाइड को लम्बाइ बराबर) (स्लाइड शो को अवधि निर्धारण): यो, हामीले दुई चर घोषणा गर्दछु। पृष्ठ पूर्णतया लोड साइट हो जब घडी सुरु हुनेछ। यो प्यारामिटर हामी (स्लाइड शो रोक्छ जो) एक स्लाइडमा माउस सूचक इशारा को कार्य बाँध।

उल कन्टेनर लम्बाइ सल्लाह दिन्छन् निश्चित हुनुहोस्। यो प्रत्येक स्लाइड को लम्बाइ ले गुणन स्लाइडहरू संख्या, बराबर हुनेछ।

स्लाइडहरू परिवर्तन लागि जिम्मेवार समारोह घुसाउनुहोस्। तपाईंले आफ्नो स्लाइडर को प्रदर्शन जाँच गर्न सक्नुहुन्छ, सबै छ।

निष्कर्षमा

यस लेखमा हामी कसरी आफ्नो वेबसाइट को पृष्ठ सम्मिलित आफ्नै jQuery-Sliders सिर्जना गर्न देख्यो। एक सरल स्लाइडर को उदाहरण प्रयोग गरेर, तपाईं यसलाई आफ्नै व्याख्या संग, स्रोत कोड गर्ने उपयुक्त परिवर्तनहरू बनाउँदा आउन सक्नुहुन्छ। यो डिजाइन सुधार र आगंतुकों लागि आफ्नो साइट को प्रयोग अधिक सुविधाजनक गर्नेछ।