·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> 网站建设开发 >> ASP.NET网站开发 >> ASP.NET中使用jQuery插件实现图片幻灯效果

ASP.NET中使用jQuery插件实现图片幻灯效果

作者:佚名      ASP.NET网站开发编辑:admin      更新时间:2022-07-23

asp.net中使用jQuery插件实现图片幻灯效果

参照网上的资料及提供的jQuery插件实现图片幻灯效果。

1、页面前台代码:

//头部引用

<head runat="server"><title></title><script type="text/javascript" src="scripts/jquery/jquery-1.10.2.min.js"></script><script type="text/Javascript" src="scripts/jquery/jquery.KinSlideshow-1.2.1.min.js"></script><script type="text/javascript">$(function () {$("#focusNews").KinSlideshow();})</script></head>

<div id="focusNews" class="ifocus"><asp:Repeater ID="FocusList" runat="server"><ItemTemplate><a title='<%#Eval("Title")%>' target="_blank" href='<%#Eval("Href")%>'><img src='<%#Eval("Src")%>' alt='<%#Eval("Title")%>' /></a></ItemTemplate></asp:Repeater></div>

2、后台代码,主要是实现数据绑定:

PRotected void Page_Load(object sender, EventArgs e){if (!IsPostBack){BindSlider();}}

private void BindSlider(){List<MyItem> list = new List<MyItem>();MyItem item1 = new MyItem();item1.Title = "item1";item1.Src = "images/1.jpg";item1.Href = "http://www.szit.edu.cn";MyItem item2 = new MyItem();item2.Title = "item2";item2.Src = "images/2.jpg";item2.Href = "http://www.sohu.com";MyItem item3 = new MyItem();item3.Title = "item3";item3.Src = "images/3.jpg";item3.Href = "http://www.sina.com";list.Add(item1);list.Add(item2);list.Add(item3);FocusList.DataSource = list;FocusList.DataBind();}下载Demo