Skip to main content

बहुत थोडे से एचटीएमएल, सीएसएस व जेक्‍वेरी के प्रयोग से आकर्षक स्‍लाइड शो बनाएँ ||

By SANSKRITJAGAT

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

यहाँ हम एचटीएमएल कोड, सीएसएस कोड तथा जेक्‍वेरी कोड को अलग-अलग लिखेंगे तथा समझेंगे -

सबसे पहले एचटीएमएल कोड देखते हैं -


एचटीएमएल कोड : 
 
<div id="slide">
    <img src="http://media2.intoday.in/indiatoday/images/stories/subhash_350_012312110452.jpg" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQnOLj4EZD38MUTgElcIvmuJTBWr0FxSV3qFUPPEWDU65VyCs52gNYiT4eQ8DMn8SIKwkWNn27W0cn5bx9BnF_Ttw-57XMsbGhDnzpT5xLeUu7v6H_WdtF76FLZmqbfpP3ymMZUzC07U/s320/ten-things-you-may-not-know-about-the-solar-s-L-yvwmi4.jpg" />
    <img src="http://midnapore.in/persons-photo/netaji_subhas_on_the_way_to_midnapore.jpg" />
    <img src="http://www.tehelka.com/wp-content/uploads/2015/12/netaji.jpg" />
    <img src="http://www.hindustantimes.com/rf/image_size_640x362/HT/p1/2015/04/10/Incoming/Pictures/1335807_Wallpaper1.jpg" />
  </div>

अब इसे समझते हैं - 
 सबसे पहले हमने एक डिवीजन शुरू किया जिसके लिये id="slide" आईडी बनायी ।
<div id="slide">
इसके बाद हमने पांच इमेज डाले । यहाँ ध्‍यातव्‍य है कि इमेज की संख्‍या कितनी भी हो सकती है । इसमें कोई निश्चित संख्‍या नहीं है । हम जितना चाहें इमेज डाल सकते हैं ।

    <img src="http://media2.intoday.in/indiatoday/images/stories/subhash_350_012312110452.jpg" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQnOLj4EZD38MUTgElcIvmuJTBWr0FxSV3qFUPPEWDU65VyCs52gNYiT4eQ8DMn8SIKwkWNn27W0cn5bx9BnF_Ttw-57XMsbGhDnzpT5xLeUu7v6H_WdtF76FLZmqbfpP3ymMZUzC07U/s320/ten-things-you-may-not-know-about-the-solar-s-L-yvwmi4.jpg" />
    <img src="http://midnapore.in/persons-photo/netaji_subhas_on_the_way_to_midnapore.jpg" />
    <img src="http://www.tehelka.com/wp-content/uploads/2015/12/netaji.jpg" />
    <img src="http://www.hindustantimes.com/rf/image_size_640x362/HT/p1/2015/04/10/Incoming/Pictures/1335807_Wallpaper1.jpg" />

इसके बाद हमने डिवीजन को बन्‍द कर दिया ।
</div>

 अब हम अपना सीएसएस कोड लिखते हैं - 

सीएसएस कोड :


<style> 
#slide 
{
position:relative; 
width:100%; 
height:306px; 
margin:auto; 
float:left; 
padding: 0px; 
overflow:hidden;
} 
#slide img 
{
width:100%; 
height:306px; 
position:absolute; 
top:0; 
left:0;
}
</style>

और अब थोडा सा जेक्‍वेरी कोड 

जेक्‍वेरी कोड :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function(){
    $('#slide img:gt(0)').hide();
    setInterval(function(){$('#slide:first-child').fadeOut(4000).next('img').fadeIn(4000).end().appendTo('#slide');}, 8000);
    });
</script>


 अपने पेज के बॉडी सेक्‍शन के किसी भी डिवीजन में सबसे पहले एचटीएमएल कोड कापी पेस्‍ट कर दीजिये, अब स्‍टाइल कोड के अन्‍तर्गत सीएसएस कोड कापी पेस्‍ट कर दीजिये तथा हेड सेक्‍शन में कही भी जेक्‍वेरी स्क्रिप्‍ट कोड को कापी पेस्‍ट कर लीजिये । अब अपने पेज को सेव करके स्‍लाइडशो का आनन्‍द लीजिये । 

अपने पेज के इमेज बदलने के लिये इमेज कोड के एसआरसी कोड में अपने इमेज का सोर्स डालें । 

पूरा कोड - 

<!doctype html>
<html>
 <head>
<title> SJWeb SlideShow </title>
<style>
 #slide 
{
position:relative; 
width:100%; 
height:306px; 
margin:auto; 
float:left; 
padding: 0px; 
overflow:hidden;
} 
#slide img 
{
width:100%; 
height:306px; 
position:absolute; 
top:0; 
left:0;
}
</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
    $(function(){
    $('#slide img:gt(0)').hide();
    setInterval(function(){$('#slide:first-child').fadeOut(4000).next('img').fadeIn(4000).end().appendTo('#slide');}, 8000);
    });
</script>
</head>
<body>
<div id="slide">
    <img src="http://media2.intoday.in/indiatoday/images/stories/subhash_350_012312110452.jpg" />
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBQnOLj4EZD38MUTgElcIvmuJTBWr0FxSV3qFUPPEWDU65VyCs52gNYiT4eQ8DMn8SIKwkWNn27W0cn5bx9BnF_Ttw-57XMsbGhDnzpT5xLeUu7v6H_WdtF76FLZmqbfpP3ymMZUzC07U/s320/ten-things-you-may-not-know-about-the-solar-s-L-yvwmi4.jpg" />
    <img src="http://midnapore.in/persons-photo/netaji_subhas_on_the_way_to_midnapore.jpg" />
    <img src="http://www.tehelka.com/wp-content/uploads/2015/12/netaji.jpg" />
    <img src="http://www.hindustantimes.com/rf/image_size_640x362/HT/p1/2015/04/10/Incoming/Pictures/1335807_Wallpaper1.jpg" />
  </div>

 </body>
</html>
Labels:

Comments

Post a Comment

Popular posts from this blog

एजाक्‍स तकनीकि - एजाक्‍स सीखें हिन्‍दी में ।

By
एजाक्‍स कोई स्‍वतन्‍त्र तकनीकि नहीं अपितु अन्‍तर्सम्‍बन्धित तकनीकों का वर्ग है । एजाक्‍स के अन्‍तर्गत मुख्‍य रूप से निम्‍न तकनीकि (भाषाएं) रखी जा सकती हैं । एचटीएमएल सीएसएस एक्‍सएमएल जेएसऑन जावास्क्रिप्‍ट XMLHttpRequest आब्‍जेक्‍ट की प्रापर्टीज  - onReadyStateChange - जब भी रेडीस्‍टेट बदलता है तो इसे कॉल किया जाता है । इसे synchronous requests के साथ प्रयोग नहीं करना चाहिए । readyState - यह विभिन्‍न कार्यों को सम्‍पादित करने के लिये प्रयुक्‍त होता है । इसे सोपान क्रम में UNOPENED, OPENED, HEADERS_RECEIVED, LOADING, DONE तरह रखा जा सकता है । reponseText - रिस्‍पान्‍स को टेक्‍स्‍ट के रूप में प्रकट करता है । responseXML - रिस्‍पान्‍स को एक्‍सएमएल के रूप में प्रकट करता है । XMLHttpRequest आब्‍जेक्‍ट के महत्‍वपूर्ण मेथड - void open(method, URL) - अनुरोध को गेट अथवा पोस्‍ट मेथड के आधार पर दिये हुए यूआरएल को भेजता है । void open(method, URL, async) - उपयुक्‍त की ही भॉंति इसका भी कार्य है केवल asynchronous है या नहीं इसका विवरण भी देता है । void open(method, ...
25 comments
Read more

सीएसएस का प्रयोग (How to Use CSS)

By
     सीएसएस का प्रयोग अत्‍यन्‍त सरल है । सीएसएस का प्रयोग आपका बहुत सारा समय व आपकी बहुत सारी मेहनत बचाने के साथ ही साथ आपके पेज को बेहतरीन सुन्‍दरता प्रदान करता है । इसके प्रयोग की तीन विधियाँ हैं । ये तीनों ही विधियाँ प्रयोज्य हैं अर्थात् इनमें से किसी भी विधि का प्रयोग आपको वांछित परिणाम प्रदान कर सकता है । सीएसएस प्रयोग विधि सीएसएस का प्रयोग निम्‍नलिखित तीन विधियों से किया जा सकता है । सीएसएस को एक अलग सीएसएस फाइल में लिखकर उसे एचटीएमएल पेज से लिंक करना । सीएसएस को एचटीएमएल पेज के हेड सेक्‍सन के अन्‍तर्गत स्‍टाइल टैग के अन्‍दर लिखना । सीएसएस को किसी भी टैग या एलीमेण्‍ट के अन्‍दर सीधे लिखना । सीएसएस का बाह्य प्रयोग -       सीएसएस को बाहर से लिंक करना सबसे बेहतरीन तरीका है । इस तरीके से आपकी कोडिंग फाइल बहुत बोझिल और बडी होने से बच जाती है । यदि हमें एक बहुत सारे ब्‍लाक्‍स का पेज बनाना है और हम हर ब्‍लाक को अलग अलग रंगों व तरीकों से सजाते हैं तो निश्चित ही हमारे पेज की कोडिंग फाइल बहुत बडी हो जायेगी जिसे सुधार कर...
3 comments
Read more

एचटीएमएल सीखें हिन्‍दी में (Learn Html in Hindi)

By
मित्रों     अबतक हमने एचटीएमएल के विभिन्‍न विभागों को सीखा । लगभग सम्‍पूर्ण एचटीएमएल ट्यूटोरियल जो कि एक शुरुआती छात्र के लिये आवश्‍यक है यहाँ पर प्रस्‍तुत किया गया है । इससे अधिक व नवीनतम अपडेट्स के विषय में जानने के लिये एचटीएमएल की मूल वेबसाइट पर जा सकते हैं । जहाँ आप सम्‍पूर्ण एचटीएमएल इसकी समस्‍त बारीकियों सहित जान पायेंगे । किन्‍तु यहाँ जितना प्रस्‍तुत किया गया है वह एक अच्‍छे वेब डेवलपर के लिये पर्याप्‍त है ।  यहाँं अबतक प्रस्‍तुत सम्‍पूर्ण एचटीएमएल ट्यूटोरियल को एकसाथ प्रस्‍तुत कर रहे हैं । जिसके लिये आपको बार-खोजना न पडे । एचटीएमएल सीखें - हिन्‍दी में ।।   एचटीएमएल संरचना । एचटीएमएल हेड सेक्‍सन (शीर्ष विभाग) ।।   ए‍चटीएमएल हेड सेक्‍सन (मेटा, लिंक, स्क्रिप्‍ट, स्‍टाइल, बेस, टाइटिल) परिचय ।   एचटीएमएल बॉडी सेक्‍सन ।। DIV एलीमेण्‍ट का प्रयोग करके वेब टेम्‍प्‍लेट बनाना DIV एलीमेण्‍ट ।।   कमेण्‍ट ।।   DIV (डीआईवी)   ID & CLASS SELECTOR (आईडी व क्‍लास सेलेक्‍टर) II   सीएसएस स्‍टाइल (CSS Style)।। ...
11 comments
Read more