<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body,p{margin: 0;padding: 0;}
#content{
width:600px;
height: 400px;
background:#dedede url(img/jiazai.gif)no-repeat center;
margin: 30px auto;
position:relative;
border: 10px solid #2a3ce6;
}
#content a{
width: 50px;
height: 50px;
border: 5px solid #da3ef6;
position: absolute;
top:170px;
line-height: 50px;
font-size: 30px;
font-weight: bold;
text-decoration: none;
background: #2a3ce6;
text-align: center;
filter:alpha(opacity:60);
opacity:0.6;
color:#fff;
}
#content a:hover{
filter:alpha(opacity:90);
opacity:0.9;
}
#prve{
left:10px;
}
#next{
right: 10px;
}
#content p{
text-align: center;
width: 600px;/*為塊元素設置絕對定位,會漂浮起來,如果不設置寬高,默認是內容撐開寬高!*/
height: 28px;
font: 16px/28px "微軟雅黑";
color:#fff;
background: #000;
filter:alpha(opacity:60);
opacity:0.6;
position: absolute;
left:0px;
}
#p1{
top: 0;
}
#p2{
bottom: 0;
}
</style>
<script type="text/javascript">
window.onload = function () {
// 查找元素
var oNext = document.getElementById('next');
var oPrve = document.getElementById('prve');
var oP1 = document.getElementById('p1');
var oP2 = document.getElementById('p2');
var oImg = document.getElementById('Img');
/* 此處聲明變量並賦初值，聲明的意思是在此作用域范圍內，在內存中開辟一塊空間給你定義的變量，
然后賦值——把你給的值放在這個變量空間中。如果不先聲明，則無法存放數據。*/
var num=0;
// 添加圖片和信息
var arrUrl = ['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg']
var arrP2 = ['圖片1','圖片2','圖片3','圖片4']
// 初使化內容
function funtab() {
oP1.innerHTML = num+1+'/'+arrUrl.length;
oP2.innerHTML = arrP2[num];
oImg.src = arrUrl[num];
}
funtab();//函數必須先調用再執行
// 上一張
oPrve.onclick = function () {
num --;
if(num==-1){
num=arrUrl.length-1;
}
funtab();
};
// 下一張
oNext.onclick = function () {
num ++;
if(num==arrUrl.length){
num=0;
}
funtab();
};
};
</script>
<body>
<div id="content">
<a id="prve" href="#"><</a>
<a id="next" href="#">></a>
<p id="p1">圖片個數加載中</p>
<p id="p2">圖片信息加載中</p>
<img id="Img" src=""/>
</div>
</body>
</html>