效果图：
js代码：
View Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="倒计时.WebForm2"%>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--新闻幻灯片的容器-->
<div id="newsshow" style="300px;">
<!--新闻幻灯片要显示的图片超链接信息-->
<a id="hp" href="#"><img border=0 style="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>
</form>
</body>
</html>
<script type="text/javascript">
var hyperlink = document.getElementById("hp"); //超链接对象
alert(hyperlink);
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.onclick = function () {
slideshow(this.id);
window.clearTimeout(timeout);
};
//添加索引号span
newsindex.appendChild(sp);
//添加索引号之间的间隔
var split = document.createElement("span");
split.innerHTML =" ";
newsindex.appendChild(split);
}
//如果循环至最后一张新闻图片，则回到第一张新闻图片重新轮转，否则从显示下一张新闻图片
if (nodeindex < newscount -1) {
timeout = window.setTimeout("slideshow("+ (++nodeindex) +")", 3000);
}
else {
timeout = window.setTimeout("slideshow(0)", 3000);
}
}
</script>
<!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 runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<!--新闻幻灯片的容器-->
<div id="newsshow" style="300px;">
<!--新闻幻灯片要显示的图片超链接信息-->
<a id="hp" href="#"><img border=0 style="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>
</form>
</body>
</html>
<script type="text/javascript">
var hyperlink = document.getElementById("hp"); //超链接对象
alert(hyperlink);
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.onclick = function () {
slideshow(this.id);
window.clearTimeout(timeout);
};
//添加索引号span
newsindex.appendChild(sp);
//添加索引号之间的间隔
var split = document.createElement("span");
split.innerHTML =" ";
newsindex.appendChild(split);
}
//如果循环至最后一张新闻图片，则回到第一张新闻图片重新轮转，否则从显示下一张新闻图片
if (nodeindex < newscount -1) {
timeout = window.setTimeout("slideshow("+ (++nodeindex) +")", 3000);
}
else {
timeout = window.setTimeout("slideshow(0)", 3000);
}
}
</script>
News.Xml
<?xml version="1.0" encoding="utf-8" ?>
<newslist>
<news text="欧锦赛：西班牙1:0击败德国44年后再成欧洲王者" image="images/news1.jpg" url="http://www.baidu.com"></news>
<news text="陕西“周老虎”以“行政疏忽”结案" image="images/news2.jpg" url="http://www.hao123.com"></news>
<news text="赖斯赞扬中国地震救援和重建工作" image="images/news3.jpg" url="http://www.cnblogs.com"></news>
</newslist>
<newslist>
<news text="欧锦赛：西班牙1:0击败德国44年后再成欧洲王者" image="images/news1.jpg" url="http://www.baidu.com"></news>
<news text="陕西“周老虎”以“行政疏忽”结案" image="images/news2.jpg" url="http://www.hao123.com"></news>
<news text="赖斯赞扬中国地震救援和重建工作" image="images/news3.jpg" url="http://www.cnblogs.com"></news>
</newslist>