javascript焦点图

效果图：

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

</ 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 = " &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 >

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 >