前景提要
利用random()让图片随机滚动,能帮忙看看,代码那里出了问题吗?
0 悬赏园豆: 5 [待解决问题] 浏览器卡死了,什么导致的,目的是让图片随机滚动,请帮助???大神
<!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> javascript js 沉梦于此 | 初学一级 | 园豆: 197
提问于:2020-04-26 13:43 这种现象应该是死循环了,debug一下看看。 – 。淑女范erり 3个月前 显示帮助
使用"Ctrl+Enter"可进行快捷提交,评论支持部分 Markdown 语法:[link](http://example.com) _italic_ **bold** `code`。
< > 分享
分享您的问题
所有回答(1) 0 我测试 浏览器 不死呢 星空下w | 园豆:215 (菜鸟二级) | 2020-04-27 09:16 编辑文本 预览 上传图片
Ctrl+Enter键快速提交
清除回答草稿
您需要 登录 以后才能回答,未注册用户请先 注册 。