jQuery點擊小圖控制大圖切換代碼
<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.shaxiangift.com/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.yx67.com/1999/xhtml"xml:lang="en" lang="en">
<head>
<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<metahttp-equiv="imagetoolbar" content="no" />
<title>jQuery點擊小圖控制大圖切換代碼</title>
<link rel="stylesheet"href="css/style.css" />
<style>
*{padding: 0px}
#gallery img {
border:none;
}
#gallery_nav {
float:left;
width:112px;
text-align:center;
}
#gallery_nav a{
display:block;height: 92px;
}
#gallery_output {
float:left;
width:600px;
overflow:hidden;
}
#gallery_output img {
display:block;
margin:0px auto 0 auto;
}
.on{ border: 1px solid rgba(92,92,92,1.00);}
</style>
<script type="text/javascript"src="js/jquery.min.js"></script>
<scripttype="text/javascript">
$(document).ready(function() {
$("#gallery_outputimg").not(":first").hide();
$("#gallerya").click(function() {
$("#gallerya").removeClass("on");
$(this).addClass("on");
if( $("#" + this.rel).is(":hidden") ) {
$("#gallery_outputimg").slideUp();
$("#"+ this.rel).slideDown();
}
});
});
</script>
</head>
<body>
<div id="content">
<divid="gallery">
<divid="gallery_nav">
<aclass="on" rel="img1"href="javascript:;"><img src="img/iphone_1.jpg"/></a>
<arel="img2" href="javascript:;"><imgsrc="img/iphone_2.jpg" /></a>
<arel="img3" href="javascript:;"><imgsrc="img/iphone_3.jpg" /></a>
<arel="img4" href="javascript:;"><imgsrc="img/iphone_4.jpg" /></a>
</div>
<divid="gallery_output">
<img src="img/iphone_1b.jpg" />
<img src="img/iphone_2b.jpg" />
<img src="img/iphone_3b.jpg" />
<img src="img/iphone_4b.jpg" />
</div>
<divclass="clear"></div>
</div>
</div>
<div style="text-align:center;margin:50px0; font:normal 14px/24px "MicroSoft YaHei";">
<p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲遊、搜狗、世界之窗.</p>
<p>來源：<a href="http://down.admin5.com/"target="_blank"> </a></p>
</div>
</body>
</html>
推薦閱讀：