javascript - 页面中两个定时器覆盖问题如何解决，请大神指导？
本文介绍了javascript - 页面中两个定时器覆盖问题如何解决，请大神指导？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
先上代码：
引入js代码
(function(){
var defaults={
adWidth:1000, //广告宽度
adHeight:60, //广告高度
imgPages:5, //图片张数
imgType:'jpg', //图片格式
imgPath:'images/', //图片路径
//showEffect:'ease', //广告轮播效果
hrefArr:[] //a链接数组
};
$.fn.AdShow=function(options,undefined){
var opts=$.extend(defaults,options,undefined),
obj=$(this),
current=0,
timer=null,
//初始化
Init=function(){
var oAdBox=$('<ul class="ad-wrapper" style="position:relative; width:'+obj.width()+'px; height:'+obj.height()+'px;"></ul>');
obj.append(oAdBox);
//创建图片
for(var i=0;i<opts.imgPages;i++){
(function(i){
var newImg=new Image();
newImg.onload=function(){
var img=document.createElement('img');
img.src=this.src;
var oLi=(i==0)?$('<li style="display:block; position:absolute; left:0; top:0;"></li>'):$('<li style="display:none; position:absolute; left:0; top:0;"></li>');
var oA=(opts.hrefArr.length!=1)?$('<a href="'+opts.hrefArr[i]+'" target="_blank"></a>'):$('<a href="'+opts.hrefArr[0]+'" target="_blank"></a>');
oA.append(img);
oLi.append(oA);
oAdBox.append(oLi);
};
newImg.src=opts.imgPath+(i+1)+'.'+opts.imgType;
})(i);
}
},
ShowNow=function(){
timer=setInterval(function(){
current++;
if(current<opts.imgPages){
$('.ad-wrapper').children('li').eq(current).fadeIn(500).siblings().fadeOut(500);
}
else{
current=0;
$('.ad-wrapper').children('li').eq(current).fadeIn(500).siblings().fadeOut(500);
}
},3000);
},
StopShow=function(){
$('.ad-wrapper').on('mouseover',function(){
clearInterval(timer);
});
},
StartShow=function(){
$('.ad-wrapper').on('mouseout',ShowNow);
};
return Init(),ShowNow(),StopShow(),StartShow();
}
})();页面布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js广告</title>
<style>
*{ margin:0; padding:0; outline:none;}
li{ list-style:none;}
a{ text-decoration:none;}
.main{ position:relative; width:1000px; height:600px; margin:0 auto; background-color:#eee;}
.ad{ position:absolute;}
.ad_xg{ left:0; top:40px; width:1000px; height:60px;}
.ad_hyxc{ left:0; top:200px; width:180px; height:60px;}
</style>
</head>
<body>
<div class="main">
<div class="ad ad_xg"></div>
<div class="ad ad_hyxc"></div>
</div>
</body>
<script src="http://www.21-sun.com/js/jquery.min.js"></script>
<script src="js/AdShow.js"></script>
<script>
$('.ad_xg').AdShow({
imgPages:5,
imgType:'jpg',
imgPath:'images/xg/',
hrefArr:[
'http://www.finesite.cn/'
]
});
$('.ad_hyxc').AdShow({
imgPages:2,
imgType:'jpg',
imgPath:'images/hyxc/',
hrefArr:[
'http://www.finesite.cn/'
]
});
</script>
</html>问题就在下边，请大神指导
解决方案
有两个问题：
$.extend(defaults,options,undefined) 这段代码会把options的值改入defaults并返回defaults，这样一是defaults被污染了，而是两个轮播共用了同一个opts。应该写成：$.extend({},defaults,options)
$('.ad-wrapper') 应该改成obj.find('.ad-wrapper')，只修改自己下面的显示。
这篇关于javascript - 页面中两个定时器覆盖问题如何解决，请大神指导？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
