<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style type="text/css"/>
#content{width:580px;height:400px;border:1px solid #ccc;margin:0 auto;position: relative;}
a,span,img,p{position:absolute;display:block;}
#content a{top:150px;width:50px;height:30px;background:#ccc;line-height: 30px;text-align: center;text-decoration: none;color:#fff;filter:alpha(opacity=90); opacity:0.9;z-index:999;}
#content a:hover{fliter:alpha(opacity:90);opacity:0.9;color:blue;}
#content a.next{right:0;}
#content span,p{background:#ccc;filter:alpha(opacity=50); opacity:0.5;height:30px;width:580px;line-height: 30px;text-align: center;bottom:0;z-index:999;}
img{width:580px;height:400px;top:0;z-index:1;}
p{top:0;margin:0;}
</style>
<script type="text/javascript">
window.onload=function(){
var OImg=document.getElementsByTagName("img")[0];
var OLast=document.getElementsByTagName("a")[0];
var ONext=document.getElementsByTagName("a")[1];
var OSpan=document.getElementsByTagName("span")[0];
var OText=document.getElementsByTagName("p")[0];
var arrText=["游戏美女","机器人","性感美女","古典美女"];
var arrSrc=["1.jpg","2.jpg","3.jpg","4.jpg"];
var num=0;
OText.innerHTML=num+1+'/'+arrText.length;
OSpan.innerHTML=arrText[num];
OImg.src=arrSrc[num];
ONext.onclick=function(){
num ++;
OText.innerHTML=num+1+'/'+arrText.length;
OSpan.innerHTML=arrText[num];
OImg.src=arrSrc[num];
}
}
</script>
</head>
<body>
<div id="content">
<p></p>
<a href="" class="last"><</a>
<a href="" class="next">></a>
<img src="" alt=""></img>
<span></span>
</div>
</body>
</html>
为啥点击不切换
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片切换</title>
<style type="text/css"/>
#content{width:580px;height:400px;border:1px solid #ccc;margin:0 auto;position: relative;}
a,span,img,p{position:absolute;display:block;}
#content a{top:150px;width:50px;height:30px;background:#ccc;line-height: 30px;text-align: center;text-decoration: none;color:#fff;filter:alpha(opacity=90); opacity:0.9;z-index:999;}
#content a:hover{fliter:alpha(opacity:90);opacity:0.9;color:blue;}
#content a.next{right:0;}
#content span,p{background:#ccc;filter:alpha(opacity=50); opacity:0.5;height:30px;width:580px;line-height: 30px;text-align: center;bottom:0;z-index:999;}
img{width:580px;height:400px;top:0;z-index:1;}
p{top:0;margin:0;}
</style>
<script type="text/javascript">
window.onload=function(){
var OImg=document.getElementsByTagName("img")[0];
var OLast=document.getElementsByTagName("a")[0];
var ONext=document.getElementsByTagName("a")[1];
var OSpan=document.getElementsByTagName("span")[0];
var OText=document.getElementsByTagName("p")[0];
var arrText=["游戏美女","机器人","性感美女","古典美女"];
var arrSrc=["1.jpg","2.jpg","3.jpg","4.jpg"];
var num=0;
OText.innerHTML=num+1+'/'+arrText.length;
OSpan.innerHTML=arrText[num];
OImg.src=arrSrc[num];
ONext.onclick=function(){
num ++;
OText.innerHTML=num+1+'/'+arrText.length;
OSpan.innerHTML=arrText[num];
OImg.src=arrSrc[num];
}
}
</script>
</head>
<body>
<div id="content">
<p></p>
<a href="" class="last"><</a>
<a href="" class="next">></a>
<img src="" alt=""></img>
<span></span>
</div>
</body>
</html>
为啥点击不切换
