參照網(wǎng)上的資料及提供的jQuery插件實(shí)現(xiàn)圖片幻燈效果。
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、后臺代碼,主要是實(shí)現(xiàn)數(shù)據(jù)綁定:
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.;MyItem item2 = new MyItem();item2.Title = "item2";item2.Src = "images/2.jpg";item2.;MyItem item3 = new MyItem();item3.Title = "item3";item3.Src = "images/3.jpg";item3.;list.Add(item1);list.Add(item2);list.Add(item3);FocusList.DataSource = list;FocusList.DataBind();}下載Demo
新聞熱點(diǎn)
疑難解答
圖片精選