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

您所在的位置：程序员俱乐部 > 编程开发 > .NET > ASP.NET中使用jQuery插件实现图片幻灯效果

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

2014/7/25 23:23:52 zhouhb 程序员俱乐部我要评论(0)

摘要：参照网上的资料及提供的jQuery插件实现图片幻灯效果。1、页面前台代码：//头部引用<headrunat="server"><title></title><scripttype="text/javascript"src="scripts/jquery/jquery-1.10.2.min.js"></script><scripttype="text/javascript"src="scripts/jquery/jquery
标签：.net ASP.NET 实现使用图片 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