以下是 jquery产品多图切换细节描述特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!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>jquery产品多图切换细节描述</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/photoslider.css" />
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#thumbnail li a").click(function () {
$("#large img").hide().attr({ "src": $(this).attr("href"), "title": $("> img", this).attr("title") });
return false;
});
$("#large>img").load(function () { $("#large>img:hidden").show(); });
});
</script>
</head>
<body>
<div id="main">
<div id="large">
<img src="images/big/1405151-1j201311051811109982.jpg" />
</div>
<div style="float: left;">
<ul id="thumbnail" style="height: auto">
<li><a href='images/Big/1405151-1j201311051811109982.jpg'>
<img src='images/Small/1405151-1j201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-2201311051811109982.jpg'>
<img src='images/Small/1405151-2201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-3201311051811109982.jpg'>
<img src='images/Small/1405151-3201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-4201311051811180124.jpg'>
<img src='images/Small/1405151-4201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-5201311051811180124.jpg'>
<img src='images/Small/1405151-5201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-6201311051811180124.jpg'>
<img src='images/Small/1405151-6201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-7201311051811180124.jpg'>
<img src='images/Small/1405151-7201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-8201311051811180124.jpg'>
<img src='images/Small/1405151-8201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-9201311051811180124.jpg'>
<img src='images/Small/1405151-9201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-10201311051811109982.jpg'>
<img src='images/Small/1405151-10201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-11201311051811109982.jpg'>
<img src='images/Small/1405151-11201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-12201311051811109982.jpg'>
<img src='images/Small/1405151-12201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-1j201311051811109982.jpg'>
<img src='images/Small/1405151-1j201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-2201311051811109982.jpg'>
<img src='images/Small/1405151-2201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-3201311051811109982.jpg'>
<img src='images/Small/1405151-3201311051811109982.jpg' /></a></li>
<li><a href='images/Big/1405151-4201311051811180124.jpg'>
<img src='images/Small/1405151-4201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-5201311051811180124.jpg'>
<img src='images/Small/1405151-5201311051811180124.jpg' /></a></li>
<li><a href='images/Big/1405151-6201311051811180124.jpg'>
<img src='images/Small/1405151-6201311051811180124.jpg' /></a></li>
</ul>
</div>
</div>
</body>
</html>
CSS代码(photoslider.css):
*{margin:0;padding:0;}
body{font:.9em/1.5 Georgia,'Times New Roman',Times,Serif;}
img{border:none;}
h1{bottom:0;font-size:1.5em;}
#header{position:relative;text-align:center;height:30px;}
#main{width:1000px;margin:0 auto;}
#large{width:810px;height:810px;float:left;background:url(../images/loading.gif) no-repeat 50% 50%;}
#large img{width:800px;height:800px;border:5px solid #223348;}
#thumbnail{width:170px;height:256px;overflow:auto;float:left;list-style:none;margin-left:2px;padding:5px;border:3px solid #223348;background:#fff;}
#thumbnail li{float:left;width:68px;margin:8px;_margin:5px;}
#thumbnail a{display:block;width:68px;height:68px;padding:1px;border:1px solid #ccc;}
#thumbnail a:hover{border-color:#405061;}
分享到QQ
分享到微博
微信扫一扫
