这个新闻轮换控件能在网页上的同一个地方显示几条新闻。新闻被拆开几页，为了放置在一个指定的区域。每一页也能包含一对新闻列表。 通过点击底部的页码，能够在不同的页面之间导航，点击页的每个新闻项，就能查看新闻的详细信息。新闻能像幻灯片一样去查看。它提供自动切换下一个（幻灯片）功能，以及过渡的样式。
使用JQuery为了：
1、对web server进行JQuery Ajax Request请求，得到JSON格式新闻 2、绑定数据（JSON格式的新闻）到HTML控件 3、在数据binding之后设置控件的样式 4、新闻之间的导航 5、用户交互 6、改变和设置样式 7、实现javascript的效果
新闻滚动控件使用从新闻存储（例如数据库，xml文件，rss，...）汇集新闻。将它转化成指定类型（NewsItem）。 然后将newsItem对象的集合转化成JSON格式的数据，作为新闻的数据来源发送到客户端。
这个控件使用开源的类库，它使JSON格式的数据在.NET中使用更加的方便。这个类库的关键的功能包括一个灵活的JSON序列化，能快速的将.net类转换成JSON ，将JSON转换成.net类。了解更多的类库（代码。示例，和文档），点击这里。
新闻轮换控件主要使用jQuery Image Rotator sample的思想。通过Soh Tanaka的描述，你能找到更多的关于如何去构造一个滚动的图片效果。
这个新闻滚动控件使用jQuery Cycle 插件来旋转新闻插件，它是一个轻量级的幻灯片插件，在页面上，这个插件为开发者提供强大的旋转能力来轮转不同类型的HTML控件。了解更多的jQuery Cycle 插件，点击这里。 你需要使用该控件： 1、引用必要的资源到你的HTML页面（.aspx页面）： 代码 <head>
<scriptsrc='/jquery.js'
type='text/javascript'></script>
<scriptsrc='/jquery.cycle.all.min.js'
type='text/javascript'></script>
<scriptsrc='/TopNews.js'
type='text/javascript'></script>
<linkhref='/TopNews.css'
rel='stylesheet'type='text/css'/>
</head>
2、在你的.aspx页面中注册和嵌入TopNews.ascx控件。
代码 <%@RegisterSrc="~/TopNews.ascx"TagName="TopNews"TagPrefix="ctrl"%>
<body>
<formid="form1"runat="server">
<div>
<ctrl:TopNewsrunat="server"id="TopNews1"/>
</div>
</form>
</body>
3、 一开始控件通过调用DOM尾部的JavaScript 的TopNews() 函数。 这个函数向服务端发送一个Ajax请求。得到JSON格式的新闻。然后将新闻绑定到控件上面。 在绑定之后，设置控件的样式，接着滚动新闻。
<scripttype="text/javascript">
newTopNews('#Container',7,true,6000);
</script>
TopNews函数参数描述：
代码 TopNewsfunctionparameters:
parameter1(objRoot):newsRotatorcontrolcontainer(ajqueryselector),
thecontrolusesthisparameterasaprefix(rootobject)ofevery
jqueryselectorinsidethecontrol.thisprefixhelpstohavemultipleinstance
ofcontrolinthepagewithoutanyworryofjqueryselectionconflict.
parameter2(newsCountPerPage):numberofnewsitemsinapage.
parameter3(viewSubtitle):abooleanvaluemakessubtitlesection
ofthecontrolenableordisable.therestofthenewstitlesshows
inthesubtitlesectionrandomlyatthebottomofthecurrentpage.
parameter4(Interval):newsrotation(slideshow)intervalinmillisecond.
4、 需要一个服务端来收集新闻。 然后将新闻转化成JSON格式，将它发送到客户端。
在客户端，我们使用Jquery发送一个Ajax请求去调用服务端的方法。
代码 //pagemethodasynchronous(sendandrecivesdatainJSONformat)
PageMethod:function(fn,paramArray,successFn,errorFn){
varpagePath=window.location.pathname;
varthat=this;
//Callthepagemethod
$.ajax({
type:"POST",
url:pagePath+"?Callback="+fn,
contentType:"application/json;charset=utf-8",
data:paramArray,
dataType:"json",
//thatisareferencetotheobjectcallingthiscallbackmethod
success:function(res){successFn(res,that)},
error:errorFn
});
}
在服务器端，我们像下面这样去实现：
代码 protectedvoidPage_Load(objectsender,EventArgse)
{
//***RoutetothePagelevelcallback'handler'
this.HandleCallbacks();
}
//Callbackrouting
publicvoidHandleCallbacks()
{
if(string.IsNullOrEmpty(Request.Params["Callback"]))
return;
//***Wehaveanactiontryandmatchittoahandler
switch(Request.Params["Callback"])
{
case"fetchAllNews":
this.FetchAllNews();
break;
}
Response.StatusCode=500;
Response.Write("InvalidCallbackMethod");
Response.End();
}
publicvoidFetchAllNews()
{
List<NewsItem>lsttst=newList<NewsItem>();
lsttst.Add(newNewsItem("EnvironmentofAustralia",
this.ResolveUrl("~/img/news1.jpg"),
this.ResolveUrl("~/img/news1_thumb.jpg"),
"Australiahasarichvarietyofendemiclegume
speciesthatthriveinnutrient-poorsoilsbecause
oftheirsymbiosiswithrhizobiabacteriaandmycorrhizalfungi",
DateTime.Now.ToShortDateString()));
lsttst.Add(newNewsItem("EconomyofAustralia",
this.ResolveUrl("~/img/news2.jpg"),
this.ResolveUrl("~/img/news2_thumb.jpg"),
"TheAustraliandollaristhecurrencyofthe
CommonwealthofAustralia,includingChristmasIsland,
Cocos(Keeling)Islands,andNorfolkIsland",
DateTime.Now.ToShortDateString()));
lsttst.Add(newNewsItem("DemographicsofAustraliaand
ImmigrationtoAustralia",this.ResolveUrl("~/img/news3.jpg"),
this.ResolveUrl("~/img/news3_thumb.jpg"),
"Mostoftheestimated21.8millionAustraliansare
descendedfromcolonial-erasettlersandpost-Federation
immigrantsfromEurope",DateTime.Now.ToShortDateString()));
lsttst.Add(newNewsItem("ReligioninAustralia",
this.ResolveUrl("~/img/news4.jpg"),
this.ResolveUrl("~/img/news4_thumb.jpg"),
"Australiahasnostatereligion.Inthecensus,
64%ofAustralianswerelistedasChristianof
anydenomination,including26%asRomanCatholicand
19%asAnglican",DateTime.Now.ToShortDateString()));
lsttst.Add(newNewsItem("EducationinAustralia",
this.ResolveUrl("~/img/news5.jpg"),
this.ResolveUrl("~/img/news5_thumb.jpg"),
"SchoolattendanceiscompulsorythroughoutAustralia.
InmostAustralianStatesat5–6yearsofageallchildren
receive11yearsofcompulsoryeducation",
DateTime.Now.ToShortDateString()));
Response.ContentType="application/json;charset=utf-8";
Response.Write(JavaScriptConvert.SerializeObject(lsttst));
Response.End();
}
代码：/Files/zhuqil/TopNews.rar
参考原文：/KB/applications/TopNews.aspx
雅虎新闻轮换控件：/KB/applications/YahooNewsRotator_.aspx
（全文完）
以下为广告部分
您部署的HTTPS网站安全吗？
如果您想看下您的网站HTTPS部署的是否安全，花1分钟时间来 检测以下吧。让您的HTTPS网站变得更安全！
SSL检测评估
快速了解HTTPS网站安全情况。
安全评级（A+、A、A-...）、行业合规检测、证书信息查看、证书链信息以及补完、服务器套件信息、证书兼容性检测等。
SSL证书工具
安装部署SSL证书变得更方便。
SSL证书内容查看、SSL证书格式转换、CSR在线生成、SSL私钥加解密、CAA检测等。
SSL漏洞检测
让服务器远离SSL证书漏洞侵扰
TLS ROBOT漏洞检测、心血漏洞检测、FREAK Attack漏洞检测、SSL Poodle漏洞检测、CCS注入漏洞检测。
