菜鸟刚学javascript，求教script标签引用位置问题

zj84604741 2012-03-22 08:00:31 
<!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 type="text/css">

.scroll_top{

	background-image:url(../images/dd_scroll_top.gif);

	width:540px;

	height:51px;

	background-repeat:no-repeat;

	}

.scroll_mid{

	background-color:#f2f2f3;

	border-left:solid 1px #d6d5d6;

	border-right:solid 1px #d6d5d6;

	width:533px;

	padding:5px 0px 5px 5px;

	}

#dd_scroll{ /*FF*/

	float:none;

	}

*html #dd_scroll{

	float:left; /*IE6*/

	}

*+html #dd_scroll{

	float:left; /*IE7*/

	}

#scroll_number{

	float:right;

	padding-right:10px;

	}

#scroll_number li{

	width:13px;

	height:15px;

	text-align:center;

	border:solid 1px #999;

	margin-top:5px;

	font-size:12px;

	line-height:16px;

	cursor:pointer;

	}

	

	#right{

   top:50px;

   right:30px;

   position:absolute;

   z-index:4;

   text-align:right;

   cursor:pointer;

   }

 .dd_close{

	 width:35px;

	 height:18px;

	 text-align:center;

	 border:solid 1px #999;

	 background-color:#E0E0E0;

	 position:absolute;

	 right:0px;

	 float:right;

	 z-index:5;

	 }

/*通栏广告样式*/

.dd_index_top_adver{

	margin:5px 0px 5px 0px;

	clear:both;

	}

	</style>

    

    

    <!--！！！第二个script标签开始-->

    <script type="text/javascript">

	var NowFrame=1;

	var path= new Array();

	path[0]="显示图片11111111111111111111111";

	path[1]="显示图片22222222222222222222222222";

	path[2]="显示图片333333333333333333333";

	path[3]="显示图片44444444444444444444444444";

	path[4]="显示图片555555555555555555555";

	path[5]="显示图片666666666666666666666";

	function show(id){

	if(Number(id)){

		//clearTimeout(theTimer);

		NowFrame=parseInt(id) -1;

	}

	for(var i =0;i< path.length ;i++){

		if(i==NowFrame){

			document.getElementById("dd_scroll").innerHTML=path[i];

			document.getElementById("dd_scroll"+(i+1)).className="scroll_number_over";    //设置当前标题的CSS样式（外部样式表）

		}else{

			document.getElementById("dd_scroll"+(i+1)).className="scroll_number_out";

		}

	}

	

	if(NowFrame == path.length-1){ //设置下一个显示的图片

		NowFrame = 0;

	}else{

		NowFrame++;

	}

}

var theTimer=setInterval('show()', 3000); //设置定时器，显示下一张图片

window.onload=show; //页面加载时运行函数show()



	</script> <!--第二个script标签结束-->



   <!--！！！！第一个script标签开始-->

     <script type="text/javascript">

    var adv;

	var top;

	var left;

	function dd_close(){

	  document.getElementById("right").style.display="none";

	}



	function inix(){

	adv=document.getElementById("right");

	if(adv.currentStyle){

		top=parseInt(adv.currentStyle.top);

		left=parseInt(adv.currentStyle.left);

	}else{

		top=parseInt(document.defaultView.getComputedStyle(adv,null).top);

		left=parseInt(document.defaultView.getComputedStyle(adv,null).left);

	}

}



function move(){

	adv.style.top=top+parseInt(document.documentElement.scrollTop)+"px";

	adv.style.left=left+parseInt(document.documentElement.scrollLeft)+"px";

	

}



window.onload=inix;

window.onscroll=move;

    </script> <!--第一个script标签结束-->

</head>



<body>

<div id="right"><div class="dd_close"><a onClick="dd_close()">关闭</a></div>这里是浮动广告<br />这里是浮动广告<br />这里是浮动广告</div>

<div class="scroll_mid"><img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll"/>

<div id="scroll_number">

    <ul>

	  <li onMouseOver="show(1)" id="dd_scroll1" class="scroll_number_over">1</li>

	  <li onMouseOver="show(2)" id="dd_scroll2">2</li>

	  <li onMouseOver="show(3)" id="dd_scroll3">3</li>

	  <li onMouseOver="show(4)" id="dd_scroll4">4</li>

	  <li onMouseOver="show(5)" id="dd_scroll5">5</li>

	  <li onMouseOver="show(6)" id="dd_scroll6">6</li>

	</ul>

  </div>

</div>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

</body>

</html>




特别说明（一定看清楚）：
以上代码 原本css 及javascript为外部文件 为了各位查看代码方便 特别写了一个内嵌版的的html代码。
以上代码可以直接运行 并能看到javascript特效

但是小弟在写的时候 两处script 位置是相反的（可是试一下，把两处script标签的位置互换一下）。结果 导致了 浮动广告 处 javascript特效无法显示。
求解答 ，为什么会这样！！！ 万分感谢！！！





...全文
335 13 打赏 收藏 转发到动态 举报
写回复
用AI写文章
13 条回复
切换为时间正序
请发表友善的回复…
发表回复
简易人 2012-03-22
  • 打赏
  • 举报
 回复
楼主：对于你的问题，我们首先来做一个分析:（这里只是IE不考虑火狐）
第一步：先分析一下你的想法，你的想法是鼠标移动到你定一的“1”，“2”上面的数字上去，后调用js方法给你当前的图片的innerHTML设置你“显示图片11111111111111111111111”文字对吧！

第二步：所以你写了！下面这句代码，document.getElementById("dd_scroll").innerHTML
但是对与IE来说，IE在对innerHTML进行写操作的时候会检查element是否具备做为这些内容中html对象容器的要求，所以问题就出现，img图片是不具备这种要求的！所以你问题出现，就是你说的那种js失效了！

第三步：解决方案
1、检查你尝试加到innerHTML的语句，所具备的要求；
2、把你的容器改成那些比较“包容”的标签
3、检查一下你所以尝试用的innerHTML对象表情的元素对象设置支持对innerHTML写的操作。
zj84604741 2012-03-22
  • 打赏
  • 举报
 回复
真是一语惊醒梦中人 ，总算明白了。 谢谢各位 解答
马上结贴。。
Acesidonu 2012-03-22
  • 打赏
  • 举报
 回复
window.onload只有一个，后面注册的函数会把前面注册的覆盖了
zj84604741 2012-03-22
  • 打赏
  • 举报
 回复
[Quote=引用 4 楼 net_lover 的回复:]

调换位置不能使用是你因为你的代码的问题。
window.onload=show;
window.onload=inix;

这样，后面的代码就会把前面的覆盖掉
你可以这样
window.onload=function()
{
inix();
show();
}
[/Quote]

inix ; 和show ; 是两个 函数啊。没有任何关系。 为什么说后面的代码就会把前面的覆盖掉
因为是写在2个javascript文件中 你给的上面这个函数 该怎么写啊
zj84604741 2012-03-22
  • 打赏
  • 举报
 回复
[Quote=引用 3 楼 zj84604741 的回复:]

[/Quote]
没有问题的。 特效都能显示出来
刚才我又试了一次 javascript特效都可以 出效果
yipingshui2011 2012-03-22
  • 打赏
  • 举报
 回复
找本基础书看下就清楚了
孟子E章 2012-03-22
  • 打赏
  • 举报
 回复
如果你不能确定onload执行的函数，你可以这样
var _oldonload = window.onload;
if (typeof _oldonload != 'function') {
window.onload = inix
} else {
window.onload = function () {
_oldonload()
inix()
}
}


var oldonload = window.onload;
if (typeof oldonload != 'function') {
window.onload = show
} else {
window.onload = function () {
oldonload()
show()
}
}

这样，再换顺序就没问题；
孟子E章 2012-03-22
  • 打赏
  • 举报
 回复
<img src="images/dd_scroll_1.jpg" alt="轮换显示的图片广告" id="dd_scroll"/>

document.getElementById("dd_scroll").innerHTML=path[i];

img 标签是没有innerHTML属性的，有些浏览器是会报错的
孟子E章 2012-03-22
  • 打赏
  • 举报
 回复
调换位置不能使用是你因为你的代码的问题。
window.onload=show;
window.onload=inix;

这样，后面的代码就会把前面的覆盖掉
你可以这样
window.onload=function()
{
inix();
show();
}
zj84604741 2012-03-22
  • 打赏
  • 举报
 回复
没有问题的。 特效都能显示出来
刚才我又试了一次 javascript特效都可以 出效果
Leo2048 2012-03-22
  • 打赏
  • 举报
 回复
给的代码直接运行有问题撒
zj84604741 2012-03-22
  • 打赏
  • 举报
 回复
在线等！ 只要能说明白 原因。 马上结贴！
求各位技术牛人 帮助！！！
script标签在html文档中位置
本文探讨了HTML中script标签的不同位置对页面加载的影响。在head标签中，直接执行的脚本可能导致页面加载延迟；使用defer属性则能延迟执行，提升加载效率。置于body标签底部的脚本则能避免页面空白，提高用户体验。
通过javascript把标签换色_HTML（一）JavaScript篇
本文介绍了JavaScript的使用，包括在HTML文档中使用和引用外部js脚本文件，还提及了JavaScript的输出方式、语法等知识。同时指出HTML加载方式对JavaScript执行时机的影响，最后推荐了w3school、菜鸟教程等学习教程，帮助读者入门和深入学习。
Vue3 vite通过2个script标签实现快捷导入mixins（菜鸟学徒--文学而）
本文介绍了如何在Vue3中使用vite框架通过两个script标签导入mixins，并展示如何在setup语法糖下直接使用mixins中的数据和方法，以及两种不同的mixins导入方式。
前端学习——JavaScript与HTML
本文详细介绍了在HTML中如何使用JavaScript，包括直接在HTML中使用script标签编写JS代码，定义函数并触发事件，以及如何将JS代码放在head或body标签中。此外，还讲解了如何引用外部的JavaScript文件，并解决了可能出现的乱码问题。
script标签里的defer属性
本文介绍了HTML中script标签的defer属性，强调该属性适用于所有主流浏览器，并且只能用于外部JS文件的引用。同时解释了defer属性的工作原理及应用场景。
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章