今天的这个例子主要是实现点击小图能显示大图，来直接看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
*{ margin:0; padding:0;}
ul,li{list-style: none;}
a{text-decoration: none;}
.box{overflow: hidden;width:500px;margin:100px auto;}
#sPic{overflow: hidden}
#sPic li{width:100px;float:left;margin:10px;}
#sPic li img{width:100px;height:auto;}
#images{width:500px;}
#des{text-align: center}
</style>
<body>
<div class="box">
<ul id="sPic">
<li><a href="javascript:void(0)" title="图片一"><img alt="图片一" src="img/pic1.jpg"/></a></li>
<li><a href="javascript:void(0)" title="图片二"><img alt="图片二" src="img/pic2.jpg"/></a></li>
<li><a href="javascript:void(0)" title="图片三"><img alt="图片三" src="img/pic3.jpg"/></a></li>
<li><a href="javascript:void(0)" title="图片四"><img alt="图片四" src="img/pic4.jpg"/></a></li>
</ul>
<img id="images" src="img/pic1.jpg" width="500" alt=""/>
<div id="des"></div>
</div>
<script src="js/jquery-1.11.3.min.js"></script>
<script>
$(function(){
$("#sPic a img").click(function(){
var src=$(this).attr("src");
$("#images").attr("src",src);
var title=$(this).attr("alt");
$("#des").text(title);
})
})
</script>
</body>
</html>
效果图如下：
这个例子也只是简单的实现了点击小图呈现大图的效果，还有点击大图收回的效果也就是让其消失等等。希望这些对你有帮助把！
当然也希望有问题直接询问评论！
原文地址：https://www.cnblogs.com/web001/p/8343867.html
时间： 2024-07-29 13:57:13