类似下面的效果：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> ul,li{ list-style-type: none; } .most:after{ content: ""; display: block; height: 0; overflow: hidden; clear: both; } .most{ width: 80%; margin: 0 auto; margin-top: 50px; } .most li{ float: left; width: 20%; } .most li img{ width: 100%;; } .show{ display: none; } </style> </head> <body> <!--展示的图片，需要点击的图片--> <ul class="most"> <li><img src="images/main1.jpg"/></li> <li><img src="images/main2.jpg"/></li> <li><img src="images/main3.jpg"/></li> <li><img src="images/main4.jpg"/></li> <li><img src="images/main5.jpg"/></li> </ul> <!--点击之后出现的块--> <div class="show"> <!--点击之后图片放在class名为text的div中--> <div class="text"></div> <a href="#" class="left"><</a> <a href="#" class="right">></a> </div> <script type="text/javascript" src="js/jquery.1.8.2.min.js" ></script> <script type="text/javascript"> $(function(){ $(".most li").on('click',function(){ index=$(this).index(); $(".text").find("img").remove(); var ulImg=$(this).find("img").attr("src"); $(".show").show(); var addImg=$(".text").append('<img id="imgId" />'); var imgSrc=$("#imgId").attr("src",ulImg); }) $(".left").on('click',function(){ if(index>0){ index--; var activeImg=$(".most li").eq(index).find("img").attr("src"); $(".text").find("img").attr("src",activeImg); }else{ alert("已经是第一张了！") } }) $(".right").on('click',function(){ if(index < $(".most li").length-1){ index++; var activeImg=$(".most li").eq(index).find("img").attr("src"); $(".text").find("img").attr("src",activeImg); }else{ alert("已经是最后一张了！") } }) }) </script> </body> </html>
权当记录