带有左右点击按钮的图片轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>多张图片切换</title>
<style>
#content{width:400px;height:400px;border:10px solid #ccc;margin:40px auto 0;position:relative;}
#content a{width:40px;height:40px;border:5px solid #000;position:absolute;top:175px;text-align:center;text-decoration: none;line-height:40px;color:#000;font-size:30px;font-weight:bold;filter:alpha(opacity=40);opacity:0.4;}
#content a:hover{filter:alpha(opacity=90);opacity:0.9;}
#prev{left:10px;}
#next{right:10px;}
#text,#span1{position:absolute;left:0;width:400px;height:30px;line-height:30px;color:#fff;background:#000;text-align:center;margin:0;filter:alpha(opacity=80);opacity:0.8;}
#text{bottom:0;}
#span1{top:0;}
#img1{width:400px;height:400px;}
</style>
</head>
<body>
<div id="content">
<a href="javascript:" id="prev"><</a>
<a href="javascript:" id="next">></a>
<p id="text">图片文字加载中....</p>
<span id="span1">数量正在计算中....</span>
<img src="img/1.jpg" alt="" id="img1">
</div>
</body>
</html>
<script>
var oPrev=document.getElementById('prev');
var oNext=document.getElementById('next');
var oSpan=document.getElementById('text');
var oSpan1=document.getElementById('span1');
var oImg=document.getElementById('img1');
var arrUrl=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg'];
var arrText=['图一说明','图二说明','图三说明','图四说明'];
var num=0;
/*初始化*/
function Fntab(){
oSpan1.innerHTML=num+1+'/'+arrText.length;
oImg.src=arrUrl[num];
oSpan.innerHTML=arrText[num];
}
Fntab();
oPrev.onclick=function(){
num--;
if(num==-1){
num=arrText.length-1;
}
Fntab();
}
oNext.onclick=function(){
num++;
if(num==arrText.length){
num=0;
}
Fntab();
}
</script>
