CSS代码:
<style type="text/css">
h1 {
text-align: center;
}
#thumbnails {
float: left;
width: 140px;
height: 450px;
overflow: auto;
border: 2px ridge #00457b;
margin-right: 10px;
}
#buttonBar {
clear: both;
text-align: center;
}
#buttonBar button {
width: 88px;
}
</style>
JQuery代码:
<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript" src="jquery.jqia.photomatic.js"></script>
<script type="text/javascript">
$(function(){
$('#thumbnails img').photomatic({
photoElement: '#photo',
previousControl: '#previousButton',
nextControl: '#nextButton',
firstControl: '#firstButton',
lastControl: '#lastButton'
});
});
</script>
HTML代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>点击小图看原图</title>
</head>
<body>
<h1>点击小图看原图</h1>
<div id="thumbnails">
<img src="images/1.jpg" width="120"/>
<img src="images/2.jpg" width="120"/>
<img src="images/3.jpg" width="120"/>
<img src="images/4.jpg" width="120"/>
<img src="images/5.jpg" width="120"/>
<img src="images/6.jpg" width="120"/>
<img src="images/7.jpg" width="120"/>
<img src="images/tree.jpg" width="120" />
<img src="images/dream.jpg" width="120" />
</div>
<div id="photoContainer">
<img id="photo" src=""/>
</div>
<div id="buttonBar">
<button type="button" id="firstButton">First</button>
<button type="button" id="previousButton">Previous</button>
<button type="button" id="nextButton">Next</button>
<button type="button" id="lastButton">Last</button>
</div>
</body>
</html>