<html>
<head>
<title>Esempio slide</title>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
var images = ["01.jpg", "02.jpg", "03.jpg", "04.jpg", "05.jpg", "06.jpg", "07.jpg", "08.jpg"];
var dir = "img";
for (i in images) {
$(".contenitore_thumbs").append("<img src='" + dir + "/" + images[i] + "' alt='" + images[i] + "'/>");
}
$(".contenitore_thumbs,input[name='right'],input[name='left']").height($(".contenitore_thumbs img").height());
$(".contenitore_thumbs").css("padding-left", "-" + $(".contenitore_thumbs img").width() * 4 + "px");
$(".contenitore_thumbs img").click(function() {
$(".contenitore_immagine img").attr("src", $(this).attr("src"));
});
$(".contenitore_arrow input").click(function() {
if ($(this).attr("name") === "left") {
$(".contenitore_thumbs").prepend($(".contenitore_thumbs img").last().hide().show());
} else {
$(".contenitore_thumbs").append($(".contenitore_thumbs img").first().hide().show());
}
});
});
</script>
<style type="text/css">
.contenitore, .contenitore_thumbs,.contenitore_immagine {
overflow: hidden;
}
.contenitore {
width: 500px;
}
.contenitore_thumbs img{
width: 25%;
float: left;
}
.contenitore_immagine img{
width: 100%;
}
input[name="left"],input[name="right"] {
border: none;
cursor: pointer;
background-color: black;
color:white;
font-weight: bold;
}
input[name="left"] {
float: left;
}
input[name="right"] {
float: right;
}
</style>
</head>
<body>
<div class="contenitore">
<div class="contenitore_arrow">
<input type="button" name="left" value="<"/>
<input type="button" name="right" value=">"/>
</div>
<div class="contenitore_thumbs"></div>
<div class="contenitore_immagine">
<img src="img/01.jpg">
</div>
</div>
</body>
</html>