html小代码
html小代码
易水寒521 发表于3年前
html小代码
  • 发表于 3年前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 新注册用户 域名抢购1元起>>>   

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<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> 


共有 人打赏支持
粉丝 0
博文 129
码字总数 120077
×
易水寒521
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: