html小代碼

時間 2019-12-10

標籤 html 代碼欄目 HTML 简体版

原文原文鏈接

<!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>
javascript

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。