<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,p{margin: 0; padding: 0;}
img{border: none; vertical-align: top;}
#box{width: 400px; height: 400px; border: 5px solid #ccc; margin: 100px auto 0; position: relative; font-size: 14px; font-family: "微软雅黑";}
#p1,#span1,a{position: absolute; color: #fff;}
#p1,#span1{left: 0; height: 30px; line-height: 30px; background: #000; opacity: 0.5; filter:alpha(opacity=50); width: 400px; text-align: center;}
#p1{bottom: 0;}
#span1{top: 0;}
a{font-size: 30px; color: #fff; top:185px; text-decoration: none;}
a:hover{opacity: 0.5;filter:alpha(opacity=50);}
#prev{left: 0;}
#next{right: 0;}
</style>
</head>
<body>
<div id="box">
<img src="" id="img1" width="400" height="400"/>
<p id="p1">11</p>
<span id="span1">22</span>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
<script type="text/javascript">
var oImg=document.getElementById('img1');
var oP=document.getElementById('p1');
var oSpan=document.getElementById('span1');
var oPrev=document.getElementById('prev');
oNext=document.getElementById('next');
var arrImg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText=['第一句话','第二句话','第三句话','第四句话'];
var num=0;
auto();
function auto(){
oImg.src=arrImg[num];
oP.innerHTML=arrText[num];
oSpan.innerHTML=num+1+'/'+arrImg.length;
}
oNext.onclick=function(){
if(num<3){
num++;
}else
{
num=0;
}
auto();
}
oPrev.onclick=function(){
if(num>0){
num--;
}else
{
num=arrImg.length-1;
}
auto();
}
</script>
</body>
</html>