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

前台

样式代码：

<style type="text/css">

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

<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代码：

<div class="PhotoList" style="width:440px;height:200px;">

<div class="PhotoListPhotos">

<a href=""><img alt="" src="" /></a>

<a href=""><img alt="" src="" /></a>

<a href=""><img alt="" src="" /></a>

<a href=""><img alt="" src="" /></a>

</div>

<div class="PhotoListDivPager">

<small></small>

<div>

<span> 1 </span>

<span> 2 </span>

<span> 3 </span>

<span> 4 </span>

</div>

</div>

</div>

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

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; }

}

最后运行效果：





还有个小bug： 页面首次加载时左下角的新闻标题未显示出第一条新闻的标题