参照网上的资料及提供的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
ASP.NET中使用jQuery插件实现图片幻灯效果