首页 新闻 会员 周边

利用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>

沉梦于此的主页 沉梦于此 | 初学一级 | 园豆:197
提问于:2020-04-26 13:43

这种现象应该是死循环了,debug一下看看。

。淑女范erり 4年前
< >
分享
所有回答(1)
0

我测试 浏览器 不死呢

星空下w | 园豆:215 (菜鸟二级) | 2020-04-27 09:16
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册