JavaScript案例精解（三）

<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>

灰灰虫的家

欢迎访问本博客，转贴者请注明出处

主页博客相册|个人档案 |好友

查看文章

JavaScript案例精解（三）

2008年07月02日 星期三 17:50

新闻幻灯片效果
门户网站的新闻幻灯片效果是很常见的，它通常每隔一定的时间切换一次新闻图片与新闻文本的显示，其中大部分是以Flash制作的。但我们可以用JavaScript和XML文件结合起来实现这种效果。
运行效果：

实现思路：用JavaScript和XML文件结合起来取出要轮转的幻灯片的信息，然后用setTime()函数使其每隔一段时间就调用函数一次，切换幻灯图片

XML代码：
<?xml version="1.0" encoding="utf-8" ?>
<newslist>
<news text="欧锦赛：西班牙1:0击败德国44年后再成欧洲王者" image="images/news1.jpg" url="#"></news>
<news text="陕西“周老虎”以“行政疏忽”结案" image="images/news2.jpg" url="#"></news>
<news text="赖斯赞扬中国地震救援和重建工作" image="images/news3.jpg" url="#"></news>
</newslist>

text:新闻幻灯显示的文本。
image：新闻幻灯显示的图片。
url：点击新闻图片要转去的URL地址

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 = "&nbsp;"+(i+1)+"&nbsp;";
sp.style.cursor="hand";

sp.id=i;
//当点击索引号时执行的事件，显示相应的幻灯信息
sp.onclick= function()
{
slideshow(this.id);
window.clearTimeout(timeout);
};
//添加索引号span
newsindex.appendChild(sp);
//添加索引号之间的间隔
var split = document.createElement("span");
split.innerHTML = "&nbsp;";
newsindex.appendChild(split);
}
//如果循环至最后一张新闻图片，则回到第一张新闻图片重新轮转，否则从显示下一张新闻图片
if(nodeindex<newscount-1)
{
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>
id：新闻图片的id
image： 新闻图片的路径
url：新闻图片要导航到的页面

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.onmouseover=function()
{
//当鼠标悬停的时候，停止滚动
window.clearInterval(scrolling);
};
dd.onmouseout = function()
{
//当鼠标离开的时候继续滚动(车延禄)
scrolling = window.setInterval(beginscroll,50);
};
</script>