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

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

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

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

एचटीएमएल कोड :

<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>