JavaScript案例详解三
发布时间：2023-03-13 11:04:51 所属栏目：教程 来源：
导读：<script> var objmain = document.getElementById("main"); function updatesize(){ var bodyw = window.document.body.offsetWidth; if(bodyw <= 790) objmain.style.width="772px"; else if(bodyw >= 1016) objmai
|
<script> var objmain = document.getElementById("main"); function updatesize(){ var bodyw = window.document.body.offsetWidth; if(bodyw <= 790) objmain.style.width="772px"; else if(bodyw >= 1016) objmain.style.width="996px"; else objmain.style.width="100%"; } updatesize(); window.onresize = updatesize; </script> 新闻幻灯片效果 门户网站的新闻幻灯片效果是很常见的，它通常每隔一定的时间切换一次新闻图片与新闻文本的显示，其中大部分是以Flash制作的。但我们可以用JavaScript和XML文件结合起来实现这种效果。 实现思路：用JavaScript和XML文件结合起来取出要轮转的幻灯片的信息，然后用setTime()函数使其每隔一段时间就调用函数一次，切换幻灯图片 XML代码： <?xml version="1.0" encoding="utf-8" ? </newslist> HTML代码： <div> <!--新闻幻灯片的容器--> <div id="newsshow" style="width:300px;"> <!----> <a id="hp" href="#"><img border=0 style="width;300px; height:200px;" id="hpimg" src="" /></a> <!--新闻幻灯片的下面的索引号--> <div id="newsindex" style="text-align:right;"></div> <!--新闻幻灯片下的新闻文本--> <div id="newstext" style="text-align:center;"></div> </div> </div> JavaScript代码： <script language="javascript"> var hyperlink = document.getElementById("hp"); //超链接对象 var hyperimage = document.getElementById("hpimg"); //图片对象 var newsindex = document.getElementById("newsindex"); //新闻索引号的容器对象 var newstext = document.getElementById("newstext"); //显示新闻内容的对象 var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("News.xml"); var root = xmldoc.documentElement; //XML文件中的新闻条数 var newscount = root.childNodes.length; //setTime所返回的对象，将来在鼠标点击的时候停止幻灯交替。 var timeout; if(newscount > 0) { timeout = window.setTimeout("slideshow(0)",0); } //幻灯片效果，接收指定的新闻的索引号 function slideshow(nodeindex) { //根据新闻的索引号，在XML文件中找相关的元素 var node = root.childNodes[nodeindex]; //为起链接对象设置href hyperlink.href = node.attributes[2].text; //为图片设置对象的图片 hyperimage.src=node.attributes[1].text; //设置新闻的标题 newstext.innerHTML = node.attributes[0].text; //清空新闻索引号div中的内容 newsindex.innerHTML = ""; //循环加载新闻索引号 for(var i=0;i<newscount;i++) { //创建一个span，并设置其内容为索引号 var sp = document.createElement("span"); //设置当前索引号的格式 if(nodeindex == i) { sp.style.backgroundColor="red"; sp.style.color="yellow"; sp.style.fontWeight="bold"; } else { //设置非当前索引号的格式 sp.style.backgroundColor="pink"; sp.style.color="blue"; } //设置索引号span内的数字 sp.innerHTML = " "+(i+1)+" "; sp.style.cursor="hand"; sp.id=i; //当点击索引号时执行的事件，显示相应的幻灯信息 sp.οnclick= function() { slideshow(this.id); window.clearTimeout(timeout); }; //添加索引号span newsindex.appendChild(sp); //添加索引号之间的间隔 var split = document.createElement("span"); split.innerHTML = " "; newsindex.appendChild(split); } { timeout=window.setTimeout("slideshow("+(++nodeindex)+")",3000); } else { timeout = window.setTimeout("slideshow(0)",3000); } } </script> 实现思路：用marquee标签实现的新闻的滚动时会出现一段空白的内容，我们可以用JavaScrip来控制新闻图片的连续滚动。 建立一个一行两列的table表格，用代码读取XML文件向其中一个单元格中加载图片信息，然后再把第二个单元格的内容设为与第一个单元格的内容相同。 然后用setTimeout或setInterval使表格在容器中向左移动，如果发现scrollLeft超出单元格的宽度的时候，再把其scrollLeft宽度减去单元格的宽。(车延禄) XML文件代码： <?xml version="1.0" encoding="utf-8" ?> <students> <student id="s1" image="images/stu1.gif" url="#"></student> <student id="s2" image="images/stu2.gif" url="#"></student> <student id="s3" image="images/stu3.gif" url="#"></student> <student id="s4" image="images/stu4.gif" url="#"></student> </students> HTML代码： <div id="dd" style="width:260px; height:75px; overflow:hidden; "> <table> <tr><td id="td1"></td> <td id="td2"></td></tr> </table> </div> Javascript代码： <script language="javascript"> var xmldoc = new ActiveXObject("Microsoft.XMLDOM"); xmldoc.async=false; xmldoc.load("student.xml"); var root = xmldoc.documentElement; //第一个单元格对象 var td1 = document.getElementById("td1"); //第二个单元格对象 var td2 = document.getElementById("td2"); //表格的容器div var dd = document.getElementById("dd"); //把相应的图片信息拼成table表格，并放入第一个单元格中 var intable="<table><tr>" for(var i=0;i<root.childNodes.length;i++) { intable += "<td><img src='"; intable += root.childNodes[i].attributes[1].text; intable += "'/></td>"; } intable += "</tr></table>" td1.innerHTML = intable; //把第一个单元格中的内容设置到第二个单元格中 td2.innerHTML = td1.innerHTML; //滚动函数 function beginscroll() { //当滚动过第二个单元格的时候，再回到初始情况 if(td2.offsetWidth <= dd.scrollLeft) { dd.scrollLeft -= td1.offsetWidth; } else { dd.scrollLeft++; } } var scrolling = window.setInterval(beginscroll,50); //容器对象的事件 dd.οnmοuseοver=function() { //当鼠标悬停的时候，停止滚动 window.clearInterval(scrolling); }; dd.onmouSEOut = function() { //当鼠标离开的时候继续滚动(车延禄) scrolling = window.setInterval(beginscroll,50); }; </script> （编辑：驾考网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
推荐文章
站长推荐