jQuery点击小图控制大图切换代码

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Strict//EN" "http://www.shaxiangift.com/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<metahttp-equiv="Content-Type" content="text/html; charset=UTF-8"/>

<metahttp-equiv="imagetoolbar" content="no" />

<title>jQuery点击小图控制大图切换代码</title>

<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>

<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>

<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">

<imgid="img1" src="img/iphone_1b.jpg" />

<imgid="img2" src="img/iphone_2b.jpg" />

<imgid="img3" src="img/iphone_3b.jpg" />

<imgid="img4" src="img/iphone_4b.jpg" />

</div>

<divclass="clear"></div>

</div>

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>

</div>

</body>

</html>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。