ASP.NET利用XML实现旗帜广告和Jquery制作旗帜广告。

一、编写ad.xml，将其放入add_Data中（放在Add_Data中的理由：1.使该XML文件在ASP.NET运行时自动获得对其的读取权限。同时可以防止在浏览器中被查看）：

<?xml version="1.0" encoding="utf-8"?>
<Advertisements>
<Ad>

<ImageUrl>要显示图片的链接</ImageUrl>

<NavigateUrl>点击图片是指向的网址</NavigateUrl>

<AlternateText>图片不可用时显示的文本</AlternateText>

<Impressions>指示广告可能的频率数值，数值越大，出现频率越高</Impressions>

<Keyword>可用于筛选广告的广告类别</Keyword>

</Ad>
</Advertisements>

二、使用AdRotator控件的AdvertisementFile属性实现获取XML路径。关键代码如下：

<asp:AdRotator ID="AdRitatir1" runat="server"

　　AdvertisementFile="~/App_Data/ad.xml"

target="_blank"

OnAdCreated="AdCreated_Event"/>

使用这种方式相对于使用javascript来说要简单方便的多。同时也能提高效率。

通过JS来控制CSS也能实现该效果，具体思路为：

1.把所有图片都加载。设置图片样式overflow：hidden；position：relative；

通过JS来设置图片样式来达到滑动效果。以下为我当时学习Jquery的时候用过的一个案例：

index.html中广告部分：

<div class="ad" >
    <ul class="slider" >
    <li><img src="images/ads/1.gif"/></li>
    <li><img src="images/ads/2.gif"/></li>
    <li><img src="images/ads/3.gif"/></li>
    <li><img src="images/ads/4.gif"/></li>
    <li><img src="images/ads/5.gif"/></li>
     </ul>
     <ul class="num" >
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
     </ul>
  </div>

广告部分样式：

.content_right .ad {
 margin-bottom:10px;
 width:586px;
 height:150px;
 overflow:hidden;
 position:relative;
}
.content_right .slider,.content_right .num{
 position:absolute;
}
.content_right .slider li{
 list-style:none;
 display:inline;
}
.content_right .slider img{
 width:586px;
 height:150px;
 display:block;
}
.content_right .num{
 right:5px;
 bottom:5px;
}
.content_right .num li{
 float: left;
 color: #FF7300;
 text-align: center;
 line-height: 16px;
 width: 16px;
 height: 16px;
 font-family: Arial;
 font-size: 12px;
 cursor: pointer;
 overflow: hidden;
 margin: 3px 1px;
 border: 1px solid #FF7300;
 background-color: #fff;
}
.content_right .num li.on{
 color: #fff;
 line-height: 21px;
 width: 21px;
 height: 21px;
 font-size: 16px;
 margin: 0 1px;
 border: 0;
 background-color: #FF7300;
 font-weight: bold;
}

Jquery代码：

$(function(){
     var len  = $(".num > li").length;
  var index = 0;
  var adTimer;
  $(".num li").mouseover(function(){
  index  =   $(".num li").index(this);
  showImg(index);
  }).eq(0).mouseover(); 
  //滑入 停止动画，滑出开始动画.
  $(‘.ad‘).hover(function(){
    clearInterval(adTimer);
   },function(){
    adTimer = setInterval(function(){
       showImg(index)
    index++;
    if(index==len){index=0;}
     } , 3000);
  }).trigger("mouseleave");
})
// 通过控制top ，来显示不同的幻灯片
function showImg(index){
        var adHeight = $(".content_right .ad").height();
  $(".slider").stop(true,false).animate({top : -adHeight*index},1000);
  $(".num li").removeClass("on")
   .eq(index).addClass("on");
}