在做一个javascript图片切换练习，可是图片，以及文字什么的都显示不出来是哪里错了呢？
本文介绍了在做一个javascript图片切换练习，可是图片，以及文字什么的都显示不出来是哪里错了呢？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
小白刚开始做练习，一个点击图标，图片以及描述性文字会切换的效果，看来看去也不知道是哪里的问题，请大神们帮忙解答
<meta charset="UTF-8">
<title>图片切换2</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#picswitcher{
width:500px;
height:400px;
margin:0 auto;
position:relative;
top:100px;
background:pink url(pics/loader_ico.gif) no-repeat center center;
border-radius:10px;
}
img{
width:400px;
height:300px;
position:absolute;
top:50px;
left:50px;
}
span,p{
display:block;
width:500px;
font-size:16px;
text-align:center;
height:20px;
position:absolute;
left:0;
}
span{
top:30px;
}
p{
bottom:30px;
}
ul{ width:100px;
height:14px;
position:absolute;
left:60px;
bottom:60px;
}
li{
width:14px;
height:14px;
font-size:10px;
margin-right:2px;
border-radius:14px;
text-align:center;
background:#F90;
float:left;
cursor:pointer;
}
.active{
background:#fc6061;
}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("picswitcher");
var oPic=oDiv.getElementById("pic");
var oText1=oDiv.getElementById("text1");
var oText2=oDiv.getElementById("text2");
var aLi=oDiv.getElementsByTagName("li");
var aUrl=["pics/pic1.png","pics/pic2.png","pics/pic3.png","pics/pic4.png","pics/pic5.png","pics/pic6.png"]
var aText2=["图片1","图片2","图片3","图片4","图片5","图片6"]
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
oText1.innerHTML=this.index+1+"/"+aLi.length;
oText2.innerHTML=aText2[this.index];
oPic.src=aUrl[this.index];
for(var j=0;j<aLi.length;j++){
aLi[j].className="";
}
this.className="active";
}
}
}
</script>
</head>
<body>
<div id="picswitcher">
<img id="pic" src="">
<span id="text1">图片序号正在计算中</span>
<p id="text2">图片文字正在加载中</p>
<ul id="switcher">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</div>
</body>解决方案
<meta charset="UTF-8">
<title>图片切换2</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
#picswitcher{
width:500px;
height:400px;
margin:0 auto;
position:relative;
top:100px;
background:pink url(pics/loader_ico.gif) no-repeat center center;
border-radius:10px;
}
img{
width:400px;
height:300px;
position:absolute;
top:50px;
left:50px;
}
span,p{
display:block;
width:500px;
font-size:16px;
text-align:center;
height:20px;
position:absolute;
left:0;
}
span{
top:30px;
}
p{
bottom:30px;
}
ul{ width:100px;
height:14px;
position:absolute;
left:60px;
bottom:60px;
}
li{
width:14px;
height:14px;
font-size:10px;
margin-right:2px;
border-radius:14px;
text-align:center;
background:#F90;
float:left;
cursor:pointer;
}
.active{
background:#fc6061;
}</style>
<script>
window.onload=function(){
var oDiv=document.getElementById("picswitcher");*/**/获取id的方式错了,是文档对象（DOM）,所以要用document.getElementById("ID名");***
var oPic=document.getElementById("pic");
var oText1=document.getElementById("text1");
var oText2=document.getElementById("text2");
var aLi=oDiv.getElementsByTagName("li");
//var aUrl=["pics/pic1.png","pics/pic2.png","pics/pic3.png","pics/pic4.png","pics/pic5.png","pics/pic6.png"]
var aText2=["图片1","图片2","图片3","图片4","图片5","图片6"]
for(var i=0;i<aLi.length;i++){
aLi[i].index=i;
aLi[i].onmouseover=function(){
oText1.innerHTML=this.index+1+"/"+aLi.length;
oText2.innerHTML=aText2[this.index];
oPic.src="pics/pic"+(this.index+1)+".png";
for(var j=0;j<aLi.length;j++){
aLi[j].className="";
}
this.className="active";
}
}
}</script>
</head>
<body>
<div id="picswitcher">
<img id="pic" src="images/01.jpg">
<span id="text1">图片序号正在计算中</span>
<p id="text2">图片文字正在加载中</p>
<ul id="switcher">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul></div>
</body>
这篇关于在做一个javascript图片切换练习，可是图片，以及文字什么的都显示不出来是哪里错了呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
