asp.net中使用jquery实现动态加载新闻框

浏览数：15 / 时间：2015年06月09日

前台

样式代码：

div.PhotoList
{
margin:0;
padding:0;
position:relative;
}
div.PhotoListPhotos
{
width:100%;
height:100%;
border:1px solid black;
}
div.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 div
{
float:right;
}
.PhotoListDivPager div span
{
color:White;
padding-left:3px;
padding-right:3px;

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

</style>

js代码：

//注意需要引用jquery

//注意获取新闻的页面路径
$.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代码：

//获取新闻的页面后台代码：

GetPhotos.aspx.cs :

需引用System.Web.Script.Serialization 用来将集合序列化为json格式的数据

using System.Web.Script.Serialization;

protected void Page_Load(object sender, EventArgs e)
{

//注：此处为方便测试随便使用了几条数据可从数据库获取最新发布的新闻
List<MyNews> newsList = new List<MyNews>();
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; }
}