Asp. NET uses XML to implement banner ads and jquery to make banner ads.

First, write the ad.xml, put it into the add_data (in the add_data reason: 1. The XML file is automatically read when it is run. can also be prevented from being viewed in the browser):

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

<ImageUrl> to display a link to a picture </ImageUrl>

<NavigateUrl> Click on the image to point to the URL </NavigateUrl>

<AlternateText> text displayed when a picture is not available </AlternateText>

<Impressions> indicates the possible frequency value of the advertisement, the higher the value, the higher the frequency of the occurrence </Impressions>

<Keyword> AD categories that you can use to filter ads </Keyword>

</Ad>
</Advertisements>

Second, use the AdRotator control's AdvertisementFile property implementation to get the XML path. The key code is as follows:

<asp:adrotator id= "AdRitatir1" runat= "Server"

Advertisementfile= "~/app_data/ad.xml"

target= "_blank"

onadcreated= "Adcreated_event"/>

This is a much simpler and more convenient way to use JavaScript. It can also improve efficiency.

Through the JS to control the CSS can also achieve this effect, the specific idea is:

1. Load all the pictures. Set Picture Style overflow:hidden;position:relative;

Use JS to set the image style to achieve the sliding effect. Here's a case I used when I was studying jquery:

Index.html in the advertising section:

<div class= "AD" >
<ul class= "Slider" >
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class= "num" >
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>

Ad section Style:

. 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 Code:

$ (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 ();
Slide into stop animation, slide out to start animation.
$ ('. Ad '). Hover (function () {
Clearinterval (Adtimer);
},function () {
Adtimer = setinterval (function () {
SHOWIMG (Index)
index++;
if (Index==len) {index=0;}
}, 3000);
}). Trigger ("MouseLeave");
})
Show different slides by controlling 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");
}

Asp. NET uses XML to implement banner ads and jquery to make banner ads.