发新贴  快速回复

华为轮播图出现空白问题

alivn
2013-07-10 11:08
 本帖最后由 alivn 于 2013-7-15 14:39 编辑 

在做华为轮播图案例时,发现一个问题,当在当前窗口正常运行时没有问题,离开窗口打开其他窗口页面后,过段时间在回到华为轮播图的窗口,会出现一段时间的空白,过段时间又回到正常。
第一次运行正常:



离开当前窗口点击其他窗口,过段时间第二次回到华为轮播图窗口:



此时,ul的left:-10758,甚至更大,但过一会left又会回到0,页面恢复正常,这是怎么回事呢?请指点,谢谢!


补充问题:

   当把 setInterval(toRun, 3000);里间隔时间设置低于1000时,同样会出现如上问题,ul的left值会无限增大。













alivn
@管理员 这样可以吗?
2013-07-10 15:02  回复本帖
 
monica
alivn 发表于 2013-7-10 15:02 forum.php?mod=redirect&goto=findpost&pid=20268&ptid=6940
@管理员 这样可以吗?

你图片没有显示出来呀,看不到是什么问题呀~?~
2013-07-11 11:07  回复本帖
alivn
monica 发表于 2013-7-11 11:07 forum.php?mod=redirect&goto=findpost&pid=20272&ptid=6940
你图片没有显示出来呀,看不到是什么问题呀~?~

[img]http://g.hiphotos.bdimg.com/album/s%3D1600%3Bq%3D90/sign=3b829987e4dde711e3d247f097dff56a/3812b31bb051f81968f82ac8dbb44aed2f73e757.jpg[/img]

就是离开窗口后,过段时间再回来,ul的定位left就会变好大,ul里的图片跑远了,显示ul的背景了,过一会就好了,怎么回事?
2013-07-11 13:50  回复本帖
alivn
alivn 发表于 2013-7-11 13:50 forum.php?mod=redirect&goto=findpost&pid=20274&ptid=6940
就是离开窗口后,过段时间再回来,ul的定位left就会变好大,ul里的图片跑远了,显示ul的背景了,过一会 ...

[img]http://g.hiphotos.bdimg.com/album/s%3D1600%3Bq%3D90/sign=3b829987e4dde711e3d247f097dff56a/3812b31bb051f81968f82ac8dbb44aed2f73e757.jpg[/img]
2013-07-11 14:35  回复本帖
 
monica
alivn 发表于 2013-7-11 14:35 forum.php?mod=redirect&goto=findpost&pid=20275&ptid=6940


额~~~你用的是外链图片吧,还是看不到哈,你可以通过附件上传试试哈{:soso_e112:} 
2013-07-11 15:01  回复本帖
爱海涛涛
请问是怎么回事呢?我也碰到过,同样的思路,但是我用jquery来写就不会有这个问题。是jquery里面有特殊处理过?还是运动框架的本身问题呢?
2013-07-12 10:13  回复本帖
alivn
monica 发表于 2013-7-11 15:01 forum.php?mod=redirect&goto=findpost&pid=20276&ptid=6940
额~~~你用的是外链图片吧,还是看不到哈,你可以通过附件上传试试哈  ...

2013-07-12 11:55  回复本帖
alivn
爱海涛涛 发表于 2013-7-12 10:13 forum.php?mod=redirect&goto=findpost&pid=20287&ptid=6940
请问是怎么回事呢?我也碰到过,同样的思路,但是我用jquery来写就不会有这个问题。是jquery里面有特殊处理 ...

是的,离开窗口过一会再回来,ul就跑的老远了,img就不见了,过一会就好了。
2013-07-12 11:57  回复本帖
 
monica
alivn 发表于 2013-7-12 11:57 forum.php?mod=redirect&goto=findpost&pid=20291&ptid=6940
是的,离开窗口过一会再回来,ul就跑的老远了,img就不见了,过一会就好了。 ...

要是方便的话,还是把代码放上来看看吧,这样截图看不出来什么问题哈~~{:soso_e112:} 
2013-07-12 15:34  回复本帖
xuan20070am
monica 发表于 2013-7-12 15:34 forum.php?mod=redirect&goto=findpost&pid=20292&ptid=6940
要是方便的话,还是把代码放上来看看吧,这样截图看不出来什么问题哈~~  ...

我也发现了有这个问题,大大,看下示例代码就知道了,打开后,缩小后等下就发现问题了,或者打开新的窗口,等下点回去,就会出现空白!
2013-07-12 16:10  回复本帖
alivn
 本帖最后由 alivn 于 2013-7-15 11:56 编辑 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
*{ padding:0; margin:0;}
li{ list-style:none;}
#div1{ min-width:1000px; height:396px; position:relative; overflow:hidden;}
#div1 ul{ position:absolute; left:0;}
#div1 ul li{ float:left;}
#div1 ul li img{ position:relative; left:0;}
#btn{ position:absolute; width:100%; text-align:center; bottom:0;}
#btn a{ cursor:pointer; display:inline-block; width:11px; height:11px; background:#666666;}
#btn a.active { background:white;} 
#btn a:hover{ background:white;}
*html .ie6_out{ margin-left:1000px; zoom:1;}
*html .ie6_in{ position:relative; float:left; margin-left:-1000px;}
</style>
<script type="text/javascript" src="move.js"></script>
<script>

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var aImg = oUl.getElementsByTagName('img');
        
    var oBtn = document.getElementById('btn');
    var aA = oBtn.getElementsByTagName('a');
    
    var imgWidth = 1920;
    var iNow = 0;
    var iNow2 = 0;
    
    oUl.style.width = aImg.length * imgWidth + 'px';
    
    function toReSize(){
        
        var veiwWidth = document.documentElement.clientWidth;
        
        if(veiwWidth>1000){
            for(var i=0;i<aImg.length;i++){
                aImg[i].style.left = - (imgWidth - veiwWidth)/2 + 'px';
            }
        }
    
    }
    
    toReSize();
    
    window.onresize = function(){
        toReSize();
    };
    
    
    for(var i=0;i<aA.length;i++){
        aA[i].index = i;
        aA[i].onclick = function(){
        
            for(var i=0;i<aA.length;i++){
                aA[i].className = '';
            }
            this.className = 'active';
            
            startMove(oUl,{left : - this.index * imgWidth});
        
        };
    }
    
    
    setInterval(toRun,3000);
    
    function toRun(){
    
        if(iNow == aLi.length-1){
            aLi[0].style.position = 'relative';
            aLi[0].style.left = aLi.length * imgWidth + 'px';
            iNow = 0;
        }
        else{
            iNow++;
        }
        
        iNow2++;
        
        for(var i=0;i<aA.length;i++){
            aA[i].className = '';
        }
        
        aA[iNow].className = 'active';
        
        startMove(oUl,{left : - iNow2 * imgWidth},function(){
        
            if(iNow==0){
                aLi[0].style.position = 'static';
                oUl.style.left = 0;
                iNow2 = 0;
            }
        
        });
        
    }
    
};

</script>
</head>
<body>
<!--[if lte IE 6]>
<div class="ie6_out">
<div class="ie6_in">
<![endif]-->

<div id="div1">
    <ul>
        <li><img src="1.jpg" /></li>
        <li><img src="2.jpg" /></li>
        <li><img src="3.jpg" /></li>
    </ul>
    <div id="btn">
        <a href="javascript:;" class="active"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
    </div>
</div>

<!--[if lte IE 6]>
</div>
</div>
<![endif]-->
</body>
</html>





就是妙味 华为轮播图的源码,请帮忙看看看!
2013-07-15 09:04  回复本帖
无为
把setInterval定时器改写成setTimeout定时器。。。
2013-07-15 16:40  回复本帖
alivn
无为 发表于 2013-7-15 16:40 forum.php?mod=redirect&goto=findpost&pid=20332&ptid=6940
把setInterval定时器改写成setTimeout定时器。。。

把setInterval定时器改写成setTimeout定时器后,轮播图只会执行一次就停止运动了。
2013-07-16 10:32  回复本帖
alivn
爱海涛涛 发表于 2013-7-12 10:13 forum.php?mod=redirect&goto=findpost&pid=20287&ptid=6940
请问是怎么回事呢?我也碰到过,同样的思路,但是我用jquery来写就不会有这个问题。是jquery里面有特殊处理 ...

兄弟,把你用jquery写的代码分享下啊。
2013-07-16 10:34  回复本帖
无为
alivn 发表于 2013-7-16 10:32 forum.php?mod=redirect&goto=findpost&pid=20346&ptid=6940
把setInterval定时器改写成setTimeout定时器后,轮播图只会执行一次就停止运动了。 ...

改写,不是说改成。  不是单纯的直接把setInterval改成setTimeout。

比如用循环定时器写一个重复执行的效果:

function fn1(){
alert(123);
}

setInterval(fn1, 1000);

改写成 延迟定时器,就是:

function fn1(){
alert(123);
}

function fn2(){
setTimoeut(function(){
fn1();
fn2();
},1000)
}
2013-07-16 12:25  回复本帖
alivn
无为 发表于 2013-7-16 12:25 forum.php?mod=redirect&goto=findpost&pid=20352&ptid=6940
改写,不是说改成。  不是单纯的直接把setInterval改成setTimeout。

比如用循环定时器写一个重复执行的 ...

改写之后问题依旧没有解决,还是谢谢你!
2013-07-16 14:43  回复本帖
ghostdp
alivn 发表于 2013-7-12 11:57 forum.php?mod=redirect&goto=findpost&pid=20291&ptid=6940
是的,离开窗口过一会再回来,ul就跑的老远了,img就不见了,过一会就好了。 ...

window.onload = function(){
    var oDiv = document.getElementById('div1');
    var oUl = oDiv.getElementsByTagName('ul')[0];
    var aLi = oUl.getElementsByTagName('li');
    var aImg = oUl.getElementsByTagName('img');
        
    var oBtn = document.getElementById('btn');
    var aA = oBtn.getElementsByTagName('a');
    
    var imgWidth = 1920;
    var iNow = 0;
    var iNow2 = 0;
    
    oUl.style.width = aImg.length * imgWidth + 'px';
    
    function toReSize(){
        
        var veiwWidth = document.documentElement.clientWidth;
        
        if(veiwWidth>1000){
            for(var i=0;i<aImg.length;i++){
                aImg[i].style.left = - (imgWidth - veiwWidth)/2 + 'px';
            }
        }
    
    }
    
    toReSize();
    
    window.onresize = function(){
        toReSize();
    };
    
    
    for(var i=0;i<aA.length;i++){
        aA[i].index = i;
        aA[i].onclick = function(){
        
            for(var i=0;i<aA.length;i++){
                aA[i].className = '';
            }
            this.className = 'active';
            
            startMove(oUl,{left : - this.index * imgWidth});
        
        };
    }
    
    
    //setInterval(toRun,3000);
    
    var timer = null;
    var bBtn = true;
    window.onblur=function(){  
        if(bBtn){
            clearInterval(timer);    
            bBtn = false;
        }
        
    };
    window.onfocus=function(){
        if(!bBtn){
            timer = setInterval(toRun,3000); 
            bBtn = true;
        }
    };
    
    timer = setInterval(toRun,3000);
    
    
    function toRun(){
    
        if(iNow == aLi.length-1){
            aLi[0].style.position = 'relative';
            aLi[0].style.left = aLi.length * imgWidth + 'px';
            iNow = 0;
        }
        else{
            iNow++;
        }
        
        iNow2++;
        
        for(var i=0;i<aA.length;i++){
            aA[i].className = '';
        }
        
        aA[iNow].className = 'active';
        
        startMove(oUl,{left : - iNow2 * imgWidth},function(){
        
            if(iNow==0){
                aLi[0].style.position = 'static';
                oUl.style.left = 0;
                iNow2 = 0;
            }
        
        });
        
    }
    
};
2013-07-16 16:57  回复本帖
xuan20070am
爱海涛涛 发表于 2013-7-12 10:13 forum.php?mod=redirect&goto=findpost&pid=20287&ptid=6940
请问是怎么回事呢?我也碰到过,同样的思路,但是我用jquery来写就不会有这个问题。是jquery里面有特殊处理 ...

哥们,能把jquery版本的共享下不!
2013-07-17 21:47  回复本帖
alivn
ghostdp 发表于 2013-7-16 16:57 forum.php?mod=redirect&goto=findpost&pid=20358&ptid=6940


谢谢,还是会有点问题.
2013-07-19 08:22  回复本帖
 
leo
alivn 发表于 2013-7-19 08:22 forum.php?mod=redirect&goto=findpost&pid=20385&ptid=6940
谢谢,还是会有点问题.

jQuery 里是以系统时间来推算算运动值,只要到时间了,就肯定运动到相应的地方,不会出问题;
而运动框架是以目标点为计算值,所以当你同时开多个窗口、或窗口变大缩小窗口时,目标点会发生变化,就容易出问题。
2013-07-19 12:21  回复本帖
ioriandy4
leo 发表于 2013-7-19 12:21 forum.php?mod=redirect&goto=findpost&pid=20392&ptid=6940
jQuery 里是以系统时间来推算算运动值,只要到时间了,就肯定运动到相应的地方,不会出问题;
而运动框架 ...

那应该如何解决呢?
2013-09-01 17:02  回复本帖
 
创美易-miaov
ioriandy4 发表于 2013-9-1 17:02 forum.php?mod=redirect&goto=findpost&pid=21078&ptid=6940
那应该如何解决呢?

让它自适应屏幕大小,然后加个开关看看
2013-09-01 21:52  回复本帖
q1207526854
这个问题基本上只要有定时器的demo都会出现,老师说过,这是高级浏览器为了节省资源,放慢了定时器执行速度,可以把定时器执行的时间写成获取系统时间加一个值,或者失去焦点清除定时器,获得焦点开启!
2013-09-03 17:10  回复本帖
00000
我也遇到了同样的问题 你解决了没有
2015-09-25 17:04  回复本帖
00000
forum.php?mod=redirect&goto=findpost&pid=20352&ptid=6940
改写,不是说改成。  不是单纯的直接把setInterval改成setTimeout。

比如用循环定时器写一个重复执行的 ...

但是改了之后怎么不自动切换了呢  非要点击切换   这个是怎么回事
2015-09-25 17:55  回复本帖
 
前端高手

用绑定,之后在解除绑定,动画是有执行时间的

2017-05-21 07:24  回复本帖
登录 后才可以发表回复