本文实例为大家分享了jquery放大点击切换图片展示的具体代码，供大家参考，具体内容如下
html代码
<body>
<div class="boss">
<div class="bigimg">
<img src="img/s1.jpg" height="350" width="350" id="spic">
<div id="mask"></div>
</div>
<div class="xia"> <a class="prev"><</a> <a class="next">></a>
<div class="items">
<ul>
<li><img src="img/b1.jpg" height="56" width="56"></li>
<li><img src="img/b2.jpg" height="56" width="56"></li>
<li><img src="img/b3.jpg" height="56" width="56"></li>
<li><img src="img/b1.jpg" height="56" width="56"></li>
<li><img src="img/b3.jpg" height="56" width="56"></li>
<li><img src="img/b1.jpg" height="56" width="56"></li>
<li><img src="img/b1.jpg" height="56" width="56"></li>
<li><img src="img/b1.jpg" height="56" width="56"></li>
<li><img src="img/b2.jpg" height="56" width="56"></li>
<li><img src="img/b3.jpg" height="56" width="56"></li>
</ul>
</div>
</div>
<div class="zoom">
<img src="img/b1.jpg" id="bpic">
</div>
</div><script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/js6.js"></script>
css代码
*{
margin: 0;
padding:0;
}
li{
list-style: none;
}
.boss{
position:relative;
width: 350px;
}
.bigimg{
width: 350px;
border: 1px solid #ccc;
height: 350px;
position: relative;
}
#mask{
width: 150px;
height: 150px;
background: rgba(255,255,255,0.5);
position: absolute;
top: 0;
left: 0;
border:1px solid #ccc;
cursor: pointer;
}.xia{
clear:both;
margin-top:5px;
width:352px;
}
.xia .prev{
float:left;
margin-right:4px;
}
.xia .next{
float:right;
}
.xia .prev,.xia .next{
display:block;
text-align:center;
width:10px;
height:54px;
line-height:54px;
border:1px solid #CCC;
background:#EBEBEB;
cursor:pointer;
text-decoration:none;
}
.xia .items{
float:left;
position:relative;
width:322px;
height:56px;
overflow:hidden;
}
.xia .items ul{
position:absolute;
height:56px;
}
.xia .items ul li{
float:left;
width:64px;
text-align:center;
}
.xia .items ul li img{
border:1px solid #CCC;
padding:2px;
width:50px;
height:50px;
