前台
样式代码：
<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： 页面首次加载时左下角的新闻标题未显示出第一条新闻的标题