<!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.οnclick=function(){
num--; if(num==-1){ num=arrText.length-1; } Fntab(); } oNext.οnclick=function(){ num++; if(num==arrText.length){ num=0; } Fntab(); }
</script>