JQUERY-BANNER-FADEIN AND FADEOUT

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Creating a Banner by using jquery </title>
<style>
*{
border:0px;
padding:0px;
margin:0px;
}
div#dynamic_banner figure img {
width:100%;
height:600px;
position:absolute;
}
div#dynamic_banner .buttons {
position:absolute;
z-index:1000;
top:550px;
left:0px;
width:100%;
}
div#dynamic_banner .buttons input[type=button]{
width:24%;
height:50px;
line-height:50px;
text-align:center;
background:rgba(255,255,255,0.5);
font-size:18px;
}
</style>
<script src="jquery.js"></script>
</head>

<body>
    <div id="dynamic_banner">
   
    <figure>
    <img src="images/1.jpg" id="img_gp">
    <img src="images/2.jpg" id="img_wp">
    <img src="images/3.jpg" id="img_dm">
    <img src="images/4.jpg" id="img_tg">
    </figure>
   
    <div class="buttons">
    <input type="button" value="Graphic App" id="gp">
    <input type="button" value="Web App" id="wp">
    <input type="button" value="Digital Marketing" id="dm">
    <input type="button" value="Tally+GST" id="tg">
    </div>
   
    </div>
   
    <script>
$(document).ready(function() {
     $("#img_gp").fadeIn("slow");

$("#img_wp,#img_dm,#img_tg").css("display","none");

$("#gp").click(function(){
$("#img_gp").fadeIn("slow");
$("#img_wp,#img_dm,#img_tg").css("display","none");
});


$("#wp").click(function(){
$("#img_wp").fadeIn("slow");
$("#img_gp,#img_dm,#img_tg").css("display","none");
});

$("#dm").click(function(){
$("#img_dm").fadeIn("slow");
$("#img_gp,#img_wp,#img_tg").css("display","none");
});

$("#tg").click(function(){
$("#img_tg").fadeIn("slow");
$("#img_gp,#img_wp,#img_dm").css("display","none");
});
     });
</script>
</body>
</html>

Comments

Post a Comment

Popular posts from this blog

Child Development and Pedagogy - MCQ

జీన్ పియాజే సిద్ధాంతంలో, పిల్లలు జ్ఞాన వికాసం దశల్లో కనీస వయస్సు ఎంత? A) 2 సంవత్సరాలు B) 7 సంవత్సరాలు C) 0 సంవత్సరాలు D) 12 సంవత్సరాలు Answer : C) 0 సంవత్సరాలు కోహల్బర్గ్ నైతిక అభివృద్ధి సిద్ధాంతంలో, ఏ దశలో పిల్లలు చట్టం మరియు నిబంధనల ఆధారంగా నైతికతను అర్థం చేసుకుంటారు? A) ప్రీ-కన్వెన్షనల్ B) కన్వెన్షనల్ C) పోస్ట్-కన్వెన్షనల్ D) సెన్సరీమోటార్ Answer : B) కన్వెన్షనల్ చామ్స్కీ భాషా అభివృద్ధి సిద్ధాంతం ప్రకారం, పిల్లలు భాష నేర్చుకోవడానికి సహజంగా ఉన్న పరికరం ఏది? A) లాంగ్వేజ్ డెవలప్‌మెంట్ పథకం B) యూనివర్సల్ గ్రామర్ C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) D) ఫార్మల్ ఆపరేషనల్ Answer : C) లాంగ్వేజ్ ఆక్విజిషన్ డివైస్ (LAD) ఎరిక్ ఎరిక్సన్ సిద్ధాంతంలో, పిల్లలు 12-18 సంవత్సరాల మధ్య ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ C) ఇండస్ట్రీ vs. ఇన్ఫీరియారిటీ D) ఆటోనమీ vs. షేమ్ Answer : B) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ కార్ల్ రజర్స్ సిద్ధాంతం ప్రకారం, వ్యక్తులు పూర్తి స్థాయి వ్యక్తిత్వ అభివృద్ధి పొందడానికి అవసరమైన ప్రధాన అంశం ఏది? A) శిక్ష B) నిష్కపట సా...
Read more

Child Development and Pedagogy - MCQ-02

  1. బాలల అభివృద్ధి (Child Development) బాలల అభివృద్ధిలో 'సంవృద్ధి' అంటే ఏమిటి? A) శారీరక పెరుగుదల B) మానసిక పరిణామం C) సామాజిక మరియు భావోద్వేగ అభివృద్ధి D) పైవన్నీ Answer : D) పైవన్నీ పియాజే సిద్ధాంతం ప్రకారం, పిల్లలు జ్ఞానాన్ని ఎలా నిర్మించుకుంటారు? A) వారి అనుభవాల ద్వారా B) పుస్తకాల ద్వారా మాత్రమే C) ఇతరుల సూచనల ద్వారా D) టీవీ చూస్తూ Answer : A) వారి అనుభవాల ద్వారా ఎరిక్ ఎరిక్సన్ సిద్ధాంతం ప్రకారం, పిల్లలు 3-6 ఏళ్లలో ఏ సామాజిక సంక్షోభాన్ని ఎదుర్కొంటారు? A) ట్రస్ట్ vs. మిస్ట్రస్ట్ B) ఇనిషియేటివ్ vs. గిల్ట్ C) ఐడెంటిటీ vs. రోల్ కన్ఫ్యూజన్ D) ఆటోనమీ vs. షేమ్ Answer : B) ఇనిషియేటివ్ vs. గిల్ట్ వాట్సన్ మరియు బాండురా అనే శాస్త్రవేత్తల సిద్ధాంతం ఏ అంశంపై దృష్టి సారిస్తుంది? A) శారీరక అభివృద్ధి B) సామాజిక అభివృద్ధి C) అభ్యాసం ద్వారా జ్ఞాన నిర్మాణం D) ఆబ్జర్వేషనల్ లెర్నింగ్ (పరిశీలన ద్వారా అభ్యాసం) Answer : D) ఆబ్జర్వేషనల్ లెర్నింగ్ 2. అభ్యాసాన్ని అర్థం చేసుకోవడం (Understanding Learning) విగోట్స్కీ యొక్క "జోన్ ఆఫ్ ప్రోక్సిమల్ డెవలప్‌మెంట్" (ZPD) అంటే ఏమిటి? A) పిల్లలు స్వతం...
Read more

jQuery-Banner

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Slide Creation</title> <script  src="myjquery.js"></script> <script src="mycycle.js"></script> </head> <body> <div id="mybanner"> <img src="images/1.jpg">     <img src="images/2.jpg">     <img src="images/3.jpg">     <img src="images/4.jpg"> </div> <script> $(document).ready(function() {     $('#mybanner').cycle({     fx: 'scrollRight' }); }); </script> </body> </html>
Read more