asp.net中使用jquery實現動態加載新聞框

前臺

樣式代碼:

p.PhotoList
{
margin:0;
padding:0;
position:relative;
}
p.PhotoListPhotos
{
width:100%;
height:100%;
border:1px solid black;
}
p.PhotoListPhotos img
{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
border:1px solid black;
}
.PhotoListDivPager
{
margin-left:2px;
margin-right:2px;
position:absolute;
bottom:0;
width:99%;
z-index:2;
background-color:Silver;
}
.PhotoListDivPager small
{
float:left;
padding-left:3px;
color:White;
}
.PhotoListDivPager p
{
float:right;
}
.PhotoListDivPager p span
{
color:White;
padding-left:3px;
padding-right:3px;

}
.PhotoListDivPager p span:hover
{
color:Red;
}

js代碼:

//註意需要引用jquery

<script type=text/jscript src=jquery-2.1.0.min.js></script>
<script type=text/javascript>
var newsArray;
$(document).ready(function () {

//註意獲取新聞的頁面路徑
$.get(../AJAX/GetPhotos.aspx, function (data, status) {

//解析json數據
newsArray = eval(( + data + ));
$.each(newsArray, function (index, item) {

//指定href鏈接地址 及圖片的url
$(.PhotoListPhotos).children().eq(index).attr(href, item.Href);
$(.PhotoListPhotos).children().eq(index).children().eq(0).attr(src, item.ImgUrl);
})
});
//為標記添加方法
$(.PhotoListDivPager).children().eq(1).children().mouseover(
function () {
var imgIndex = $(this).text() – 1;
IndexChanged(imgIndex);
});

//默認選擇瞭第一條新聞
IndexChanged(0);
})
//鼠標指向的新聞改變
function IndexChanged(index) {
$(.PhotoListPhotos).find(img).css(z-index, -1);
$(.PhotoListDivPager).children().eq(1).children().css(color, white);
$(.PhotoListPhotos).children().eq(index).children().css(z-index, 1);
$(.PhotoListDivPager).children().eq(1).children().eq(index).css(color, red);
$(.PhotoListDivPager).children().eq(0).text(newsArray[index].Title);
}
</script>

新聞圖片部分的前臺html代碼:

 

data-cke-saved-src=
data-cke-saved-src=
data-cke-saved-src=
data-cke-saved-src=

 

//獲取新聞的頁面後臺代碼:

GetPhotos.aspx.cs :

需引用System.Web.Script.Serialization 用來將集合序列化為json格式的數據

using System.Web.Script.Serialization;

 

protected void Page_Load(object sender, EventArgs e)
{

//註:此處為方便測試 隨便使用瞭幾條數據 可從數據庫獲取最新發佈的新聞
List newsList = new List();
newsList.Add(new MyNews() { Title = 新聞1, ImgUrl = ../Images/q1.jpg, Href = ../Default.aspx});
newsList.Add(new MyNews() { Title = 新聞2, ImgUrl = ../Images/q2.jpg, Href = href2 });
newsList.Add(new MyNews() { Title = 新聞3, ImgUrl = ../Images/q3.jpg, Href = href3 });
newsList.Add(new MyNews() { Title = 新聞4, ImgUrl = ../Images/q4.jpg, Href = href4 });
JavaScriptSerializer jss = new JavaScriptSerializer();
Response.Clear();
Response.Write(jss.Serialize(newsList));
Response.End();
}
private class MyNews
{
public string Title{get;set;}
public string ImgUrl{get;set;}
public string Href { get; set; }
}

最後運行效果:

還有個小bug: 頁面首次加載時左下角的新聞標題未顯示出第一條新聞的標題

發佈留言