Sei sulla pagina 1di 3

<!

DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jquery learnin


g</title><style type="text/css">.slider{width:350px;height:250px;overflow:hidden
;margin:30px auto;}.slider img{width:350px;height:250px;display:none;}</style><s
cript type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.
9.0/jquery.min.js"></script><script type="text/javascript"src="https://ajax.goog
leapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script><script type="te
xt/javascript">function Slider(){$(".slider#1").show("fade",500);$(".slider#1").
delay(5500).hide("slide",{direction:'left',500);var sc = $(".slider img").size()
;var count = 2;setinterval(function(){$(".slider#"+count).show("slide",{directio
n:'right'},500);$(".slider#"+count).delay(5500).hide("slide",{direction:'left'},
500);if(count == sc){count = 1;}else{count = count + 1;}},6500);}</script> </hea
d><body onload="slider();"><div class="slider"><img id="1" src="images/pic1.jpg"
border="0" alt="pic1" /><img id="2" src="images/pic2.jpg" border="0" alt="pic1"
/><img id="3" src="images/pic3.jpg" border="0" alt="pic1" /><img id="4" src="im
ages/pic4.jpg" border="0" alt="pic1" /></div></body></html>

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>jquery learnin


g</title><style type="text/css">.slider{width:350px;height:250px;overflow:hidden
;margin:30px auto;}.slider img{width:350px;height:250px;display:none;}</style><s
cript type="text/javascript"src="https://ajax.googleapis.com/ajax/libs/jquery/1.
9.0/jquery.min.js"></script><script type="text/javascript"src="https://ajax.goog
leapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script><script type="te
xt/javascript">function gallery(){$(".slider #a1").show("fade",500);$(".slider #
a1").delay(5500).hide("slide",{direction:'left',500);var sc = $(".slider img").s
ize();var count = 2;setinterval(function(){$(".slider #"+count).show("slide",{di
rection:'right'},500);$(".slider #"+count).delay(5500).hide("slide",{direction:'
left'},500);if(count == sc){count = 1;}else{count = count + 1;}},6500);}</script
></head><body onload="gallery();"><div class="slider"><img id="a1" src="images/p
ic1.jpg" border="0" alt="pic1" /><img id="b2" src="images/pic2.jpg" border="0" a
lt="pic1" /><img id="c3" src="images/pic3.jpg" border="0" alt="pic1" /><img id="
d4" src="images/pic4.jpg" border="0" alt="pic1" /></div></body></html>

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- For intranet testin
g only, remove in production. -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
</head>
<body>
<div id="slideShowImages">
<img src="images/slide1.jpg" alt="Slide 1" />
<img src="images/slide2.jpg" alt="Slide 2" />
<img src="images/slide3.jpg" alt="Slide 3" />
<img src="images/slide4.jpg" alt="Slide 4" />
</div>
<button id="slideShowButton"></button> <!-- Optional button element. -->
<script src="slideShow.js"></script>
</body>
</html>
********************************************************************************

**********
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> <!-- For intranet testin
g only, remove in production. -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Slide Show</title>
<style>
#slideShowImages { /* The following CSS rules are optional. */
border: 1px gray solid;
background-color: lightgray;
}
#slideShowImages img { /* The following CSS rules are optional. */
border: 0.8em black solid;
padding: 3px;
}
</style>
</head>
<body>
<div id="slideShowImages">
<img src="images/slide1.jpg" alt="Slide 1" />
<img src="images/slide2.jpg" alt="Slide 2" />
<img src="images/slide3.jpg" alt="Slide 3" />
<img src="images/slide4.jpg" alt="Slide 4" />
</div>
<button id="slideShowButton"></button> <!-- Optional button element. -->
<script src="slideShow.js"></script>
</body>
</html>
********************************************************************************
*****************
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
********************************************************************************
**************************
<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapProp = {
center:new google.maps.LatLng(15.823424,74.491337),
zoom:16,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>
</html>

Potrebbero piacerti anche