本文介绍了两种实现网站广告轮播的方法：一种利用XML文件结合ASP.NET的AdRotator控件，实现随机展示广告图片；另一种使用JavaScript动态更换图片源，达到连续自动播放的效果。
傻子今天学习了一些简单的javescript，其中一个比较有趣的是广告栏的动态变化，一般一个公司的广告都是好几张的，现在我将广告的两种比较常见的几张图片的运用方法贴一下。
第一种就是，广告控件+xml,他显示主要主要是每次打开时，随机选择一张显示，基本上每次显示的图片都不同，不过他基本上不用运用javescript.代码大略如下：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="2t.aspx.vb" Inherits="_2_2t" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:adrotator ID="Adrotator1" AdvertisementFile="a.xml" BorderColor="black" BorderWidth=1 runat="server" />
</div>
</form>
</body>
</html>
xml代码为：
<?xml version="1.0" encoding="utf-8" ?>
<Advertisements>
<Ad>
<ImageUrl>pic/83364.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>pic/83365.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>pic/83366.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>pic/83367.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>pic/83368.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
<Ad>
<ImageUrl>pic/83369.jpg</ImageUrl>
<NavigateUrl>http://www.zj.com</NavigateUrl>
<AlternateText>Alt Text</AlternateText>
<Keyword>Nutrition</Keyword>
<Impressions>80</Impressions>
</Ad>
</Advertisements>
第二种就是用javescript来实现多张图片的动态变化。
代码如下：
<html>
<head>
<title>Untitled</title>
</head>
<script language="JavaScript">
var myImage=new Array(8);
for(i=0;i<8;i++)
myImage[i]=new Image();
myImage[0].src="pic/83364.jpg";
myImage[0].alt="0";
myImage[1].src="pic/83365.jpg";
myImage[1].alt="1";
myImage[2].src="pic/83366.jpg";
myImage[2].alt="2";
myImage[3].src="pic/83367.jpg";
myImage[3].alt="3";
myImage[4].src="pic/83368.jpg";
myImage[4].alt="4";
myImage[5].src="pic/83369.jpg";
myImage[5].alt="5";
myImage[6].src="pic/83370.jpg";
myImage[6].alt="6";
myImage[7].src="pic/83371.jpg";
myImage[7].alt="7";
var k=0;
function CPIC()
{
document.myImage1.src=myImage[k].src;
document.myImage1.alt=myImage[k].alt;
k++;
if(k==8)
k=0;
setTimeout(CPIC,1000);
}
</script>
<body>
<A href="a.aspx" target=_blank><IMG name="myImage1" alt="0" src="pic/83364.jpg" border=0></A>
<script language="JavaScript">
CPIC();
</script>
</body>
</html>
其中，alt为鼠标经过时显示的文字信息，src就是图片的内容了
第一种就是，广告控件+xml,他显示主要主要是每次打开时，随机选择一张显示，基本上每次显示的图片都不同，不过他基本上不用运用javescript.代码大略如下：
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="2t.aspx.vb" Inherits="_2_2t" %><!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>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:adrotator ID="Adrotator1" AdvertisementFile="a.xml" BorderColor="black" BorderWidth=1 runat="server" /> </div> </form></body></html>xml代码为：
<?xml version="1.0" encoding="utf-8" ?><Advertisements> <Ad> <ImageUrl>pic/83364.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>pic/83365.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>pic/83366.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>pic/83367.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>pic/83368.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> <Ad> <ImageUrl>pic/83369.jpg</ImageUrl> <NavigateUrl>http://www.zj.com</NavigateUrl> <AlternateText>Alt Text</AlternateText> <Keyword>Nutrition</Keyword> <Impressions>80</Impressions> </Ad> </Advertisements>代码如下：
<html><head><title>Untitled</title></head><script language="JavaScript">var myImage=new Array(8);for(i=0;i<8;i++)myImage[i]=new Image();myImage[0].src="pic/83364.jpg";myImage[0].alt="0";myImage[1].src="pic/83365.jpg";myImage[1].alt="1";myImage[2].src="pic/83366.jpg";myImage[2].alt="2";myImage[3].src="pic/83367.jpg";myImage[3].alt="3";myImage[4].src="pic/83368.jpg";myImage[4].alt="4";myImage[5].src="pic/83369.jpg";myImage[5].alt="5";myImage[6].src="pic/83370.jpg";myImage[6].alt="6";myImage[7].src="pic/83371.jpg";myImage[7].alt="7";var k=0;function CPIC(){
document.myImage1.src=myImage[k].src;document.myImage1.alt=myImage[k].alt;k++;if(k==8)k=0;setTimeout(CPIC,1000);}</script><body><A href="a.aspx" target=_blank><IMG name="myImage1" alt="0" src="pic/83364.jpg" border=0></A> <script language="JavaScript">CPIC();</script></body></html>
扫一扫
292
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
