方法一:
js代码:
function changePic(currentPic) {
$(".picName").removeClass("actives");
var imgpic = currentPic.getElementsByTagName("img")[0];
$("#bigPic").attr({
src : imgpic.src
});
currentPic.className = "actives picName";
}
css
.bigpic{
width: 100%;
overflow: hidden;
}
.bigpic ul li img{
width: 100%;
}
.smallpic ul li{
width: 26%;
float: left;
margin: 10px;
}
.smallpic ul li img{
width: 100%;
}
.actives{
border: 2px solid #1fb6f9;
}
html
<div class="pictu col-md-5">
<div class="bigpic">
<ul>
<li><img src="__TMPL__/public/assets/images/integral/1.jpg" alt="" id="bigPic"></li>
</ul>
</div>
<div class="smallpic">
<ul>
<li class="actives picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/1.jpg" alt=""></li>
<li class="picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/2.jpg" alt=""></li>
<li class="picName" onmouseover="changePic(this)"><img src="__TMPL__/public/assets/images/integral/3.jpg" alt=""></li>
</ul>
</div>
</div>