各位大大,我是一名初学者,仿凤凰网图片轮播写了一个程序,到处是BUG,求指教
<!DOCTYPE html><html>
<head>
weixinstyle.rar
(1.29 MB)
<meta charset="utf-8" />
<title></title>
<style>
*{margin:0;padding:0;}
#box{width:378px;height:250px;margin:10% auto;position:relative;}
#div1{width:378px;height:30px;margin:0;padding:0;}
ul{margin:0;padding:0;}
li{float:left;width:40px;height:30px;list-style-type:none;display:inline-block;margin:0;padding:0;
line-height:30px;border:1px solid #dedfda;text-align:center;}
#div2{width:378px;height:220px;}
img{width:378px;height:220px;}
p{width:378px;height:30px;position:absolute;bottom:0;background-color:rgba(0,0,0,0.1);
text-align:center;line-height:30px;}
span{width:25px;height:25px;position:absolute;background-color:rgba(0,0,0,0.1);line-height:25px;
text-align:center;font-size:25px;top:45%;color:#ffffff;}
span:hover{background-color:rgba(0,0,0,0.6);cursor:pointer;}
.left{left:10px;}
.right{right:10px;}
.avte{background:red;color:#FFFFFF;cursor:pointer;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementById('ul');
var aLi=oUl.getElementsByTagName('li');
var oDiv=document.getElementById('div2');
//var oBox=document.getElementById('box');
var aSpan=oDiv.getElementsByTagName('span');
var oP=document.getElementsByTagName('p')[0];
var aImg=oDiv.getElementsByTagName('img')[0];
var leaLi=aLi.length;
var leaSpan=aSpan.length;
var arrimg=['img/1.jpg','img/2.jpg','img/3.jpg','img/4.jpg','img/5.jpg','img/6.jpg','img/7.jpg','img/8.jpg','img/9.jpg'];
var textimg=['图片一','图片二','图片三','图片四','图片五','图片六','图片七','图片八','图片九']
var num=0;
// }
//初始化
oP.innerHTML=textimg[num];
aImg.src=arrimg[num];
aLi[num].className='avte';
var _this=null;
var olde=null;
for(var i=0;i<arrimg.length;i++){
aLi[i].index=i;
olde=aLi[num];
aLi[i].onmouseover=function(){
_this=this;
olde.className='';
olde=this;
this.className='avte';
aImg.src=arrimg[this.index];
oP.innerHTML=textimg[this.index];
}
aSpan[0].onclick=function(){
for (var i=0;i<arrimg.length;i++){
aLi[i].className='';
}
_this.className='avte';
_this.index--;
if(_this.index==-1){
_this.index=arrimg.length-1;
}
oP.innerHTML=textimg[_this.index];
aImg.src=arrimg[_this.index];
aLi[_this.index].className='avte';;
}
aSpan[1].onclick=function(){
for (var i=0;i<arrimg.length;i++){
aLi[i].className='';
}
_this.className='avte';
_this.index++;
if(_this.index==arrimg.length){
_this.index=0;
}
oP.innerHTML=textimg[_this.index];
aImg.src=arrimg[_this.index];
aLi[_this.index].className='avte';
}
}
}
</script>
</head>
<body>
<div id="box">
<div id="div1">
<ul id="ul">
<li id="0">资讯</li>
<li id="1">娱乐</li>
<li id="2">体育</li>
<li id="3">汽车</li>
<li id="4">时尚</li>
<li id="5">军事</li>
<li id="6">房产</li>
<li id="7">视频</li>
<li id="8">游戏</li>
</ul>
</div>
<div id="div2">
<img src="img/加载中.gif">
<p>图片正在加载中……</p>
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>