这两段js放在同一个页面中使用,会有冲突吗?

时间:2021-07-02 22:26:38
这两段js放在同一个页面中使用,会有冲突吗?因为老是出现一个可以实现效果,一个就不可以。

HTML和js:


飘动广告
<div id="float">
<div id="anniu" onclick="adv_close()"><img onmousemove="stop()" onmouseout="start()" src="images/01.png" width="30" height="30" /></div>
<img src="images/06.jpg" width="203" height="123"  onmousemove="stop()" onmouseout="start() "/></div>


</div>
<script type="text/javascript">
var img=document.getElementById('float');
var x=0;
var y=0;
var xSpeed=6;
var ySpeed=1;
var width,height;
var timer;
function movediv()
{
width=document.body.clientWidth-203;
height=document.body.clientHeight-210;
if(x>width||x<0)
xSpeed=-xSpeed;
if(y>height||y<0)
ySpeed=-ySpeed;
x=x+xSpeed;
y=y+ySpeed;
img.style.left=x+"px";
img.style.top=y+"px";

}

function start()
{
timer=setInterval("movediv()",100);
}
   function stop()
   {
   clearInterval(timer);
   }
   start();
   
   
function adv_close()
{
document.getElementById('float').style.display=document.getElementById('anniu').style.display="none";
timer=setInterval("reshow()",10*1000);
}
function reshow()
{
document.getElementById('float').style.display=document.getElementById('anniu').style.display="block";

}


</script>

轮播
<div id="focus">
<ul>
<li>
<a href="#" target="_blank"><img src="images/08.jpg" alt="" id="pic"></a>
<div  class="left" onClick="showpre()"></div>
<div class="right" onClick=" shownext()"></div>

</li>
</ul>
</div>


var picsall = new Array(); 
picsall[0] = "images/08.jpg";
picsall[1] ="images/09.jpg";
picsall[2] ="images/10.jpg";
picsall[3] = "images/11.jpg";
picsall[4] ="images/12.jpg";
var timer,index=0;


function showpic(){
document.getElementById("pic").src=picsall[index];
if(index<(picsall.length-1))
index++;
else
index=(index+1)%picsall.length;
timer=setTimeout("showpic()",2000);

}

function showprepic(){

if(index>0)
index--;
else
index=4;
document.getElementById("pic").src=picsall[index];
timer=setTimeout("showprepic()",2000);

}
function shownext()
{
clearTimeout(timer);
showpic();
}
function showpre()
{
clearTimeout(timer);
showprepic();
}

setTimeout("showpic()",2000);

2 个解决方案

#1


js  只有变量,函数 不冲突,就不会冲突

#2


2端代码timer变量名称一样了,如果clear了timer,有可能导致冲突,另外起变量名称

还有setTimeout/setInterval这种直接传递函数名称就行了,如果有参数多一个function(){}来调用,不要传递字符串,要不你的代码做个匿名函数调用就可以避免变量名一样的冲突了

#1


js  只有变量,函数 不冲突,就不会冲突

#2


2端代码timer变量名称一样了,如果clear了timer,有可能导致冲突,另外起变量名称

还有setTimeout/setInterval这种直接传递函数名称就行了,如果有参数多一个function(){}来调用,不要传递字符串,要不你的代码做个匿名函数调用就可以避免变量名一样的冲突了