仿苹果样式的jQuery图片滑块焦点图 - 源码之家

<!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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Apple-like Slideshow Gallery | Tutorialzine demo</title>
<link href="demo.css" type="text/css" rel="stylesheet">
<script src="http://ajax.downcms.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
<!--[if lte IE 7]>
<style type="text/css">
ul li{
display:inline;
/*float:left;*/
}
</style>
<![endif]-->
</head>
<body>
<div id="main">
<div id="gallery">
<div id="slides" style="width: 3680px; margin-left: 0px;">
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/macbook.jpg"></div>
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/iphone.jpg"></div>
<div class="slide"><img width="920" height="400" alt="side" src="img/sample_slides/imac.jpg"></div>
<div class="slide"><a target="_blank" href="http://www.downcms.com"><img width="920" height="400" alt="side" src="img/sample_slides/info.jpg"></a></div>
</div>
<div id="menu">
<ul>
<li class="fbar inact"> </li><li class="menuItem inact act"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_macbook.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_iphone.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_imac.png"></a></li><li class="menuItem inact"><a href=""><img alt="thumbnail" src="img/sample_slides/thumb_about.png"></a></li>
</ul>
</div>
</div>
</div>
</body></html>

复制代码