setInterval在火狐的兼容问题

今天在做无缝轮播的时候发现火狐浏览器总是在图片滚动的时候发生卡帧现象而IE新版本谷歌完全没有问题

如果发生这种问题解决方案

先clearInterval，在重新setInterval

例子：

var timer=null；

clearInterval(timer)

timer=setInterval(function(){},1000);

 

 

 

图片无缝滚动代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*,body{
margin: 0;
padding: 0;
}
img{
display: block;
width: 200px;
height: 200px;
}
li{
list-style: none;
float: left;
}
div{
width: 800px;
height: 200px;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/59-14041GQ2040-L.jpg"></li>
<li><img src="img/dacsd.jpg"></li>
<li><img src="img/59-14041GQ2040-L.jpg"></li>
<li><img src="img/dacsd.jpg"></li>
<li><img src="img/59-14041GQ2040-L.jpg"></li>
<li><img src="img/dacsd.jpg"></li>
</ul>
</div>
</body>
<script src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$("ul li").clone().appendTo("ul")
$("ul").width($("li").width()*$("li").length);
var timer=null
clearInterval(timer)
var num=0
timer=setInterval(function(){
num++
$("ul").animate({marginLeft:-num},0)
if(num==$('ul').width()/2){
num=0
$("ul").animate({marginLeft:0},0)
}
},10);

})
</script>
</html>

 

posted @ 2017-04-27 15:04  高海蒙  阅读(1300)  评论(0)    收藏  举报