今天的这个例子主要是实现点击小图能显示大图，来直接看代码：
<!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;500px;margin:100px auto;} #sPic{overflow: hidden} #sPic li{100px;float:left;margin:10px;} #sPic li img{100px;height:auto;} #images{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>
效果图如下：
这个例子也只是简单的实现了点击小图呈现大图的效果，还有点击大图收回的效果也就是让其消失等等。希望这些对你有帮助把！
当然也希望有问题直接询问评论！