JQuery पुस्तकालय: अपनी वेबसाइट के लिए स्लाइडर

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

कैसे एक वेब पेज पर एक स्लाइडर को जोड़ने के लिए?

तरीके एक स्लाइड-ब्लॉक को जोड़ने के लिए पृष्ठ पर संख्या। अक्सर भी एचटीएमएल कोड लिख सकते हैं और स्क्रिप्ट में तल्लीन करने की जरूरत नहीं है। यहां नि: शुल्क पुस्तकालयों की काफी संख्या, उपयोगकर्ताओं को एक से तैयार टेम्पलेट आप अपनी साइट पर JQuery-स्लाइडर्स जोड़ने कि करता है। आपको बस इतना करना है - अपने वेब पेज के स्रोत कोड में कॉपी और परिणाम का आनंद लेने के लिए है। हालांकि, इस मामले में अपने रचनात्मक कल्पना को साकार करने की संभावना सीमित है। इसलिए, यह स्वतंत्र रूप से डिजाइन तत्व बनाने के लिए सक्षम होने के लिए उपयोगी है। ऐसा करने के लिए, तुम्हें पता है कि कैसे JQuery सरल स्लाइडर लागू करने की आवश्यकता है, और केवल यह मुश्किल है, आप हमेशा कोड में अतिरिक्त तत्वों को जोड़ने कर सकते हैं।

खुद के द्वारा एक स्लाइडर बनाएँ: एचटीएमएल कोड में

सबसे पहले, जहां शुरू करने के लिए - स्लाइडर के भविष्य के लेआउट रजिस्टर करने के लिए है।

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

हम सीएसएस के साथ काम कर रहे हैं

फिर हम यह करने के लिए सीएसएस-दस्तावेज़ का उपयोग कर वांछित शैली की विशेषताओं लागू होते हैं। यह ठीक से काम करने के लिए हमारी सामग्री JQuery स्लाइडर लागू करने के लिए आवश्यक है और सही नज़र डाली। इस स्तर पर, हम निम्नलिखित कार्यों के साथ सामना कर रहे हैं:

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

ऐसा करने के लिए, सीएसएस फ़ाइल में निम्न विकल्प सेट:

• स्लाइड शो के लिए: ओवरफ़्लो- एक्स - स्क्रॉल, अतिप्रवाह-y - छिपा:
• उल के लिए: नाव - छोड़ दिया है।

इसके अलावा, आप बहुत आगे चौड़ाई के मापदंडों (चौड़ाई), ऊंचाई (ऊंचाई), पृष्ठभूमि (पृष्ठभूमि) और सेट कर सकते हैं।

हम JQuery में इस कोड डाल

HTML और सीएसएस सभी आवश्यक बदलाव किए गए हैं। यह JQuery कोड, स्लाइडर, जो निम्नलिखित मानकों होना चाहिए के लिए मामला रहता है:

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

slidewidth और slidertime (स्लाइड की लंबाई के बराबर) (निर्धारित करता है स्लाइड शो की अवधि): ऐसा करने के लिए, हम दो चर घोषणा करते हैं। टाइमर शुरू कर देंगे जब पेज को पूरा भरा स्थल है। इस पैरामीटर करके हम एक स्लाइड (जो स्लाइड शो बंद हो जाता है) के लिए माउस सूचक की ओर इशारा करते की कार्रवाई टाई।

उल कंटेनर लंबाई निर्धारित करने के लिए सुनिश्चित करें। यह स्लाइड की संख्या, प्रत्येक स्लाइड की लंबाई से गुणा के बराबर हो जाएगा।

समारोह स्लाइड बदलने के लिए जिम्मेदार डालें। बस इतना ही, आप अपने स्लाइडर के प्रदर्शन की जांच कर सकते हैं।

निष्कर्ष

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