浏览器卡死了,什么导致的,目的是让图片随机滚动,请帮助???大神
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#box { width: 300px; height: 400px; margin: 0 auto; border: 1px solid #000; background: #FBE9EF; }
ul { padding: 0; margin: 0; float: left; }
li { list-style: none; width: 125px; height: 90px; margin: 0px 10px 5px 10px; border: 1px solid #000; position: relative; overflow: hidden; }
img { width: 125px; height: 90px; vertical-align: top; position: absolute;}
.img1 { top: 0; left: 0; }
.img2 { top: 90px; left: 0; }
</style>
<script>
window.onload=function(){
var aImg=document.getElementsByTagName('img');
var aImg1=document.getElementsByClassName('img1');
var aImg2=document.getElementsByClassName('img2');
var aLi=document.getElementsByTagName('li');
var arr=[];
var arrImg=['Img/1.gif','Img/2.gif','Img/3.gif','Img/4.gif','Img/5.gif','Img/6.gif','Img/7.gif','Img/8.gif','Img/9.gif','Img/10.gif','Img/11.gif','Img/12.gif','Img/13.gif','Img/14.gif','Img/15.gif','Img/16.gif'];
var timer=null;
for(var i=0;i<aImg.length;i++){
aImg[i].src=arrImg[i];
aImg[i].index=true;
};
timer=setInterval(function(){
Random();//随机产生1-8个随机不重复数字
for(var i=0;i<arr.length;i++){
var j=arr[i];
if(aImg1[j].index){
doMove(aImg1[j],'top',10,-90,function(){
aImg1[j].index=false;
});
doMove(aImg2[j],'top',10,0);
}else{
doMove(aImg1[j],'top',10,0,function(){
aImg1[j].index=true;
});
doMove(aImg2[j],'top',10,90);
}
}
},2000);
function Random(){//随机产生1-8个随机不重复数字
var Num=Math.ceil(Math.random()*aLi.length);
while(arr.length<=Num){
var isRandom=Math.round(Math.random()*(aLi.length-1));
if (arr.length==0){
arr.push(isRandom);
}else{
if(arr.join(',').indexOf(isRandom)==-1){
arr.push(isRandom);
}
}
}
};
function doMove(obj,attr,dir,target,endFn){
dir = parseInt(getStyle(obj,attr))<target ? dir : -dir; //dir=返回值
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=parseInt(getStyle(obj,attr))+dir;
if(speed<target && dir<0 || speed>target && dir>0){
speed=target;
}
obj.style[attr]=speed+'px';
if(speed==target){
clearInterval(obj.timer);
//if(endFn){endFn();};
endFn && endFn();//有就执行
}
},40)
};
function getStyle(obj,attr){
return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr];
};
}
</script>
</head>
<body>
<div id="box">
<ul>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
</ul>
<ul>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
<li><img class="img1" src="" alt=""><img class="img2" src="" alt=""></li>
</ul>
</div>
</body>
</html>
我测试 浏览器 不死呢
这种现象应该是死循环了,debug一下看看。
– 。淑女范erり 4年前