演示地址:http://www.corange.cn/demo/3727/index.html
http://www.corange.cn//uploadfiles/1117_95849.jpg

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple-like Slideshow Gallery-www.corange.cn</title>

<link rel="stylesheet" type="text/css" href="demo.css" />

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

<!--[if lte IE 7]>
<style type="text/css">
ul li{
display:inline;
/*float:left;*/
}
</style>
<![endif]-->

</head>

<body>

<div id="main">

<h1>Apple-like Slideshow Gallery</h1>
<div id="gallery">

<div id="slides">

<div class="slide"><img src="img/sample_slides/macbook.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="img/sample_slides/iphone.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><img src="img/sample_slides/imac.jpg" width="920" height="400" alt="side" /></div>
<div class="slide"><a href="http://tutorialzine.com/2009/10/beautiful-apple-gallery-slideshow/" target="_blank"><img src="img/sample_slides/info.jpg" width="920" height="400" alt="side" /></a></div>

</div>

<div id="menu">

<ul>
<li class="fbar">&nbsp;</li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_macbook.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_iphone.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_imac.png" alt="thumbnail" /></a></li><li class="menuItem"><a href=""><img src="img/sample_slides/thumb_about.png" alt="thumbnail" /></a></li>
</ul>


</div>

</div>

</div>

</body>
</html>

原文地址:http://www.corange.cn/archives/2010/11/3727.html