<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="utf-8" />
<title>Slide </title>
<style type="text/css">
h1{ font-size:24px; font-weight:bold; color:rgb(50,50,250); }
#contenitore{
position:relative; margin:10px auto; width:500px; height:400px; overflow:hidden; border:1px solid; z-index:1;
}
#contenitore:hover > #avanti div, #contenitore:hover > #indietro div{
display:block;
}
#box{
position:absolute; left:50px; top:0; width:400px; height:400px; z-index:2;
}
#box img{
width:400px; position:absolute; top:0; z-index:1;
}
#avanti{
position:absolute; top:0; right:0; width:50px; height:100%; text-align:center;
background:white; z-index:3;
}
#avanti div{
margin:auto;
position:absolute; top:0; bottom:0; right:0; left:0; width:0; height:0;
border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-left: 50px solid #000; display:none;
}
#indietro{
position:absolute; top:0; left:0; width:50px; height:100%; text-align:center;
background:white; z-index:3;
}
#indietro div{
margin:auto;
position:absolute; top:0; bottom:0; right:0; left:0; width:0; height:0;
border-top: 50px solid transparent; border-bottom: 50px solid transparent; border-right: 50px solid #000; display:none;
}
</style>
<script type="text/javascript" src="slide.js"> </script>
</head>
<body>
<h1>Slider </h1>
<p>
The images are load with <b>XMLHttpRequest</b>. It does not work in older browser.
</p>
<div id="contenitore">
<div id="box"></div>
<div id="avanti"><div></div></div>
<div id="indietro"><div></div></div>
</div>
<script type="text/javascript">
var slider = new SlideImage('img_Slide.xml','box','avanti','indietro');
slider.slideAutomatico();
slider.fermaAutomatico();
slider.riprendiAutomatico();
</script>
</body>
</html>
|
Download
