zbqy.cnblogs.comBETA.png)
利用XSLT+JavaScript+Asp.net动态添加广告图片
首先我们来看一看代码
XSLT的
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>XSLT代码演示</title>
</head>
<BODY leftMargin="0" topMargin="2" marginheight="0" marginwidth="0">
<CENTER>
<TABLE
style="BORDER-RIGHT: #666666 1px solid; BORDER-TOP: #666666 1px solid; BORDER-LEFT: #666666 1px solid;
BORDER-BOTTOM: #666666 1px solid" cellSpacing="0" cellPadding="0" width="540" align="center" border="0">
<TBODY>
<TR>
<TD>
<DIV id="demo" style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #ffffff">
<table cellSpacing="0" cellPadding="0" align="left" border="0" cellspace="0">
<TBODY>
<TR>
<TD id="demo1" vAlign="top"><table width="540" height="116" border="0" cellpadding="0"
cellspacing="0">
<xsl:for-each select="productdata/product">
<td width="171" >
<img><xsl:attribute name="src"><xsl:value-of select="srcurl"/></xsl:attribute></img>
</td>
</xsl:for-each>
</table>
</TD>
<TD id="demo2" vAlign="top"></TD>
</TR></TBODY></table></DIV>
<script src="img/one.js"></script>
</TD>
</TR></TBODY></TABLE></CENTER>
</BODY>
</html></xsl:template>
</xsl:stylesheet>
由于XML 中 对于标签有着 很敏感的大小写识别，所以 一定要注意 标签的配对
在里面可以直接嵌套 JavaScript 脚本 不过 为了 代码的干净和简洁，我把JS 放在了一个JS文件里了
one.js文件
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidth
else{demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}再来看下 ＸＭＬ 文件
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="product.xsl"?>
<productdata>
<product prodid="P001">
<srcurl>img/1.jpg</srcurl>
</product>
<product prodid="P002">
<srcurl>img/2.jpg</srcurl>
</product>
<product prodid="P003">
<srcurl>img/3.jpg</srcurl>
</product>
<product prodid="P004">
<srcurl>img/4.jpg</srcurl>
</product>
<product prodid="P005">
<srcurl>img/5.jpg</srcurl>
</product>
<product prodid="P006">
<srcurl>img/6.jpg</srcurl>
</product>
<product prodid="P007">
<srcurl>img/7.jpg</srcurl>
</product>
<product prodid="P008">
<srcurl>img/8.jpg</srcurl>
</product>
<product prodid="P009">
<srcurl>img/9.jpg</srcurl>
</product>
</productdata>
看下 代码执行的 修改过程
protected void Button1_Click(object sender, EventArgs e)
{ XmlDocument xmlDoc = new XmlDocument(); xmlDoc.Load(Server.MapPath("product.xml"));XmlNodeList nodeList = xmlDoc.SelectSingleNode("productdata").ChildNodes;//获取productdata节点的所有子节点
foreach (XmlNode xn in nodeList)//遍历所有子节点
{ XmlElement xe = (XmlElement)xn;//将子节点类型转换为XmlElement类型if (xe.GetAttribute("prodid") == "P001")//如果prodid属性值为“P001”
{ XmlNodeList nls = xe.ChildNodes;//继续获取xe子节点的所有子节点foreach (XmlNode xn1 in nls)//遍历
{ XmlElement xe2 = (XmlElement)xn1;//转换类型if (xe2.Name == "srcurl")//如果找到
{ xe2.InnerText = TextBox1.Text ;//则修改break;//找到退出来就可以了
}
}
break;}
}
xmlDoc.Save(Server.MapPath("product.xml"));//保存。
}
就这样 实现了 动态 修改 广告中的图片了
直接执行 product.xml 文件
https://files.cnblogs.com/zbqy/05.rar
