<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style type="text/css"> *{margin:0px; padding:0px;} #main{width:1000px; height:600px; margin:0px auto;} #main ul li{width:288px; height:180px;list-style-type:none; float:left; margin:10px 20px; box-shadow:0px 0px 15px #000;} .gray{width:100%; height:100%; background:rgba(0,0,0,0.5); position:absolute; left:0px; top:0px;display:none;} .showImg{width:650px; height:406px;position:absolute; left:338px; top:100px;border:10px solid #FFFFFF; display:none;} .showImg img.butl{ position:absolute; left:-50px; top:186px;} .showImg img.butr{ position:absolute; right:-50px; top:186px;} </style> </head> <body> <div id="main"> <ul> <li><img src="images/s1.jpg" bigsrc="images/big1.jpg" /></li> <li><img src="images/s2.jpg" bigsrc="images/big2.jpg" /></li> <li><img src="images/s3.jpg" bigsrc="images/big3.jpg" /></li> <li><img src="images/s4.jpg" bigsrc="images/big4.jpg" /></li> <li><img src="images/s5.jpg" bigsrc="images/big5.jpg" /></li> <li><img src="images/s6.jpg" bigsrc="images/big6.jpg" /></li> <li><img src="images/s7.jpg" bigsrc="images/big7.jpg" /></li> <li><img src="images/s8.jpg" bigsrc="images/big8.jpg" /></li> <li><img src="images/s9.jpg" bigsrc="images/big9.jpg" /></li> </ul> </div> <!--灰色图层--> <div class="gray"></div> <!--显示大图--> <div class="showImg"> <img src="images/big1.jpg" class="BigImg" /> <img src="images/dirl.png" class="butl" /> <img src="images/dirr.png" class="butr" /> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> var _bigsrc=null; var index=0; $("#main ul li").click(function(){ //alert("我被点击了！！！"); $(".gray").show(); $(".showImg").show(); _bigsrc=$(this).find("img").attr("bigsrc"); //alert(_bigsrc); $(".showImg img.BigImg").attr("src",_bigsrc); index=$(this).index(); //alert(index); }); //向右切换 $(".showImg img.butr").click(function(){ index++; //alert(index); if(index<=8){ _bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc"); $(".showImg img.BigImg").attr("src",_bigsrc); }else{alert("右边到头了"); index=8;} }); //向左切换 $(".showImg img.butl").click(function(){ index--; //alert(index); if(index>=0){ _bigsrc=$("#main ul li").eq(index).find("img").attr("bigsrc"); $(".showImg img.BigImg").attr("src",_bigsrc); }else{alert("左边到头了");index=0;} }); $(".gray").click(function(){ $(this).hide(); $(".showImg").hide(); }); </script> </body> </html>