jQuery 点击小图切换大图
jQuery 实现点击小图切换大图；
效果：
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<style type="text/css">
.datu{
width: 500px;
height: 500px;
border: 1px solid #ccc;
}
.datu img{
width: 100%;
}
.litup ul{margin: 0;padding: 0;}
.litup li{
list-style: none;
display: inline-block;
width: 120px;
float: left;
height: 120px;
line-height: 120px;
border: 1px solid #000000;
margin: 5px;
}
.litup li img{
width: 100%;
vertical-align: middle;
}
</style>
<body>
<div class="datu">
<img src="img/timg.jpg" />
</div>
<div class="litup">
<ul>
<li>
<img src="img/timg.jpg" />
</li>
<li>
<img src="img/001.jpg" />
</li>
<li>
<img src="img/caca.png" />
</li>
</ul>
</div>
</body>
<script>
$(function(){
$('.litup').find('li').click(function(){
var src = $(this).find('img').attr('src')
console.log(src)
$('.datu img').attr('src',src)
})
});
</script>
</html>
