首页 > 代码库 > ASP.NET利用XML实现旗帜广告和Jquery制作旗帜广告。
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="http://www.mamicode.com/images/ads/1.gif"/></li>
<li><img src="http://www.mamicode.com/images/ads/2.gif"/></li>
<li><img src="http://www.mamicode.com/images/ads/3.gif"/></li>
<li><img src="http://www.mamicode.com/images/ads/4.gif"/></li>
<li><img src="http://www.mamicode.com/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");
}
ASP.NET利用XML实现旗帜广告和Jquery制作旗帜广告。