原理：AJAX动态加载数据库中图片信息给游览器，利用2个叠词div动态修改内部图片透明度做出淡进淡出效果。（IE6无效)
难点：json数组操作。
HTML：就是几个图片容器。加载大图的div position: absolute;
<body>
<!--小图-->
<div id="thumbs">
<div id="lastthumbs"></div>
<div id="thumbsnav"></div>
<div id="nextthumbs"></div></div>
<!--大图-->
<div id="photo">
<div id="lastphoto"></div>
<div id="photocontent"><div id="below"><img alt="lidy" src="#"/></div><div id="above"><img alt="lidy" src="#"/>
</div><div id="msg"><p>得瑟得瑟</p><input type="button" value="确定" onclick="msg(0)"/></div><ul><li></li><li></li></ul></div>
<div id="nextphoto"></div>
</div>
</body>
CSS:加载大图的div position: absolute;
View Code
<style type="text/css">
body {
text-align: center;
margin: 0px auto;
}
/*小图*/
#lastthumbs {
float: left;
margin-top:20px;
width:22px;
height:50px;
cursor: pointer;
background:url(images/icon_2.png) no-repeat -179px -181px;
}
#thumbsnav {
float: left;
margin-left:10px;
}
#thumbsnav span {
cursor: pointer;
}
#nextthumbs {
float:right;
margin-top:20px;
width:22px;
height:50px;
cursor: pointer;
background:url(images/icon_2.png) no-repeat -197px -181px;
}
#thumbs {
margin: 20px auto;
width: 1020px;
height: 80px;
}
#thumbs span {
border: 2px solid red;
margin-left:10px;
display:inline-block;
height: 80px;
}
/*大图*/
#photo {
clear:both;
margin: 0px auto;
width: 1000px;
height:600px;
}
#photo div {
height:500px;
}
#lastphoto {
margin-top:50px;
float:left;
width:100px;
height:350px !important;
cursor:pointer;
background:url(images/icon_2.png) no-repeat -295px 0px;
}
#nextphoto {
margin-top:50px;
float:left;
width:100px;
height:350px !important;
cursor:pointer;
background:url(images/icon_2.png) no-repeat -408px 0px;
}
#photocontent {
float:left;
width:800px;
position:relative;
}
#photocontent ul {
list-style-type: none;
margin-top:460px;
}
#below {
position: absolute;
width:800px;
left:0px;
top:0px;
}
#above {
position: absolute;
width:800px;
left:0px;
top:0px;
}
/*提示消息*/
#msg {
position: absolute;
display:none;
top:200px;
left:350px;
border:2px solid #888;
height:90px !important;
background-color:white;
}
</style>
JS :看代码
View Code
var num = 0; //当前图片
var link = 0; //当前滚动条序号
var btnstop = true; //按钮
var datas; //json数据
var count; //图片总数
function photoload(index) { //图片加载
if (btnstop) { //防止多次点击
btnstop = false;
$("#below img").attr("src", datas[num].photo_url); //当前图片到下层
num = index; //更新当前索引
var objImagePreloader = new Image();
objImagePreloader.onload = function () { //当图片加载完成时
$("#above img").css("opacity", "0"); //先隐藏上层图片
$('#above img').attr('src', datas[index].photo_url); //设置下载好的图片到上层
$("#photocontent ul li:eq(0)").html("地点：" + datas[index].photo_source);
$("#photocontent ul li:eq(1)").html("介绍：" + datas[index].photo_info); //介绍
$("#above img").animate({ //上层图片淡进
opacity: 1.0
}, 1500, function () {
btnstop = true; // 动画完成
});
$("#below img").animate("opacity", "0", 1500); //下层图片淡出
}
objImagePreloader.src = datas[index].photo_url; //要加载的图片的地址
}
}
function nextthumbs() { //下一组小图片加载
if (link < parseInt(count / 7)) { //判定是否超出总数
link++;
$.post("photo.ashx", { "num": link }, //异步请求下一组图片地址
function (data) {
datas = datas.concat($.parseJSON(data)); //合并当前的数据和加载的数据
var img = $("#thumbsnav img"); //获取小图片DOM对象
for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址
if (i < count) { //判定是否超出总数
var purl = datas[i].photo_url.split("/"); //取出来的是大图地址，小图地址要加上thumbs文件夹
img[i % 7].index = i;
img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
img[i % 7].onclick = function () { //设置新的点击事件的图片索引
photoload(this.index);
};
}
else { //已到最后
img[i % 7].src = "images/thumbs/1.gif";
}
}
})
}
else {
msg(2);
}
}
function lastthumbs(){ //上一组图片，不需要加载了。
if (link > 0) {
link--;
var img = $("#thumbsnav img");
for (i = link * 7; i < (link + 1) * 7; i++) { //遍历新数据，取出设置小图地址
var purl = datas[i].photo_url.split("/");
img[i % 7].index = i; //设置索引
img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
img[i % 7].onclick = function () { //设置新的点击事件的图片索引
photoload(this.index);
};
}
}
}
function nextphoto() { //加载下一张图片
$("#below img").attr("src", datas[num].photo_url); //当前图片到下面的元素
num++;
var objImagePreloader = new Image(); //图片加载对象
objImagePreloader.onload = function () { //图片加载完成
$("#above img").css("opacity", "0"); //上层图片隐藏
$('#above img').attr('src', datas[num].photo_url); //设置加载好的地址
$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //介绍
$("#above img").animate({ //慢慢显示
opacity: 1.0
}, 1500, function () {
btnstop = true; // 动画完成
});
$("#below img").animate("opacity", "0", 1500); //慢慢隐藏
}
objImagePreloader.src = datas[num].photo_url; //加载图片的地址
}
function lastphoto() { //加载上一张图片
$("#below img").attr("src", datas[num].photo_url);
num--;
var objImagePreloader = new Image();
objImagePreloader.onload = function () { //图片加载完成
$("#above img").css("opacity", "0");
$('#above img').attr('src', datas[num].photo_url);
$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info);
$("#above img").animate({
opacity: 1.0
}, 1500, function () {
btnstop = true; // 动画完成，按钮启用
});
$("#below img").animate("opacity", "0", 1500); //淡出
}
objImagePreloader.src = datas[num].photo_url; //加载图片的地址
}
function msg(index) { //窗口消息
$("#msg").css("display", "block");
if (index == 0) {
$("#msg").css("display", "none");
}
else if (index == 1) {
$("#msg p").html("已到第一张图片");
setTimeout(function () { $("#msg").css("display", "none"); }, 5000);
}
else {
$("#msg p").html("已到最后一张图片");
setTimeout(function () { $("#msg").css("display", "none"); }, 5000);
}
}
$(document).ready(function () {//这里最好不要用$()取代
if (count == null) { //第一次加载
$.post("photo.ashx", { "count": 0 }, function (data) { //获取总的数量
count = parseInt(data);
});
}
$.post("photo.ashx", { "num": "0" }, //请求第一组图片数据
function (data) {
datas = $.parseJSON(data); //实例化json
$("#above img").attr("src", datas[num].photo_url); //开始显示的图片地址
$("#photocontent ul li:eq(0)").html("地点：" + datas[num].photo_source);
$("#photocontent ul li:eq(1)").html("介绍：" + datas[num].photo_info); //开始显示的图片介绍
var thumbs = $("#thumbsnav");//小图Dom
for (i = 0; i < 7; i++) { //遍历第一组小图加载地址
var purl = datas[i].photo_url.split("/");
var span = "<span><img οnclick='photoload("+i+")' alt='lidy' src='" + purl[0] + "/thumbs/" + purl[1] + "' /></span>";
thumbs.append(span); //加入Dom
}
}
);
$("#nextthumbs").click(function () { //下一组小图
nextthumbs();
});
$("#lastthumbs").click(function () { //上一组小图
lastthumbs();
}
);
$("#nextphoto").click(function () { //下一幅图片
if (btnstop) { //防止多次点击
if (num < count - 1) { //判定超出总数
btnstop = false;
if (parseInt((num + 1) / 7) > link) { //超出当前的7张图片的话，要更新小图
link++; //累加小图轮数
$.post("photo.ashx", { "num": link }, //请求下一组图片数据
function (data) {
datas = datas.concat($.parseJSON(data)); //合并到现在的数据
nextphoto(); //加载下一轮大图了
var img = $("#thumbsnav img");
for (i = link * 7; i < (link + 1) * 7; i++) { //遍历显示下一组的小图
if (i < count) { //判定最后几张图不满7张的话
var purl = datas[i].photo_url.split("/");
img[i % 7].index = i;
img[i % 7].src = purl[0] + "/thumbs/" + purl[1];
img[i % 7].onclick = function () { //更新点击事件图片地址索引
photoload(this.index);
};
}
else { //显示其他的图片
img[i % 7].src = "images/thumbs/1.gif";
}
}
})
}
else {
nextphoto(); //如果不用加载下一组图片
}
}
else {
$("#msg").css("display", "block");
}
}
})
$("#lastphoto").click(function () { //加载上一张大图
if (btnstop) {
if (num > 0) { //如果不是第一张
btnstop = false;
if (parseInt((num - 1) / 7) < link) { //如果是这组的第一张，要加载上一组的小图片
lastthumbs(); //加载上一组小图片
}
lastphoto();//加载上一张图片
}
else {
msg(1); //第一张图片显示提示
}
}
})
})
后台处理程序photo.ashx：（请求json数据和图片总数）
View Code
public void ProcessRequest(HttpContext context)
{
string num = context.Request["num"];
int inum;
if (num != null)
{
if (int.TryParse(num, out inum))
{
SqlParameter[] sqlp = new SqlParameter[]{ //获取7行数据
new SqlParameter("@min",SqlDbType.Int),
new SqlParameter("@max",SqlDbType.Int)
};
sqlp[0].Value = inum*7;
sqlp[1].Value = (inum+1)*7;
DataSet ds = SqlHelper.ExecuteDataset(SqlHelper.connectionString, "proc_photolinks", sqlp);
context.Response.Write(Dataset2Json(ds)); //转成Json
}
else
{
context.Response.Write("h");
}
}
else if (context.Request["count"]!=null)
{
context.Response.Write(SqlHelper.ExecuteScalar(SqlHelper.connectionString, "proc_photocount").ToString());
}
else{
}
}
public static string Dataset2Json(System.Data.DataSet ds)
{
StringBuilder json = new StringBuilder();
json.Append("[");
foreach (System.Data.DataTable dt in ds.Tables)
{
json.Append(DataTable2Json(dt));
json.Append(",");
}
json.Remove(json.Length - 1, 1);
json.Append("]");
return json.ToString();
}
public static string DataTable2Json(System.Data.DataTable dt)
{
StringBuilder jsonBuilder = new StringBuilder();
for (int i = 0; i < dt.Rows.Count; i++)
{
jsonBuilder.Append("{");
for (int j = 0; j < dt.Columns.Count; j++)
{
jsonBuilder.Append("\"");
jsonBuilder.Append(dt.Columns[j].ColumnName);
jsonBuilder.Append("\":\"");
jsonBuilder.Append(dt.Rows[i][j].ToString().Replace("\"", "\\\"").Trim()); //对于特殊字符，还应该进行特别的处理。
jsonBuilder.Append("\",");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
jsonBuilder.Append("},");
}
jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
return jsonBuilder.ToString();
}
public bool IsReusable
{
get
{
return false;
}
}
思路：加载好网页元素后异步请求一组图片数据操作显示，后每需要加载新的一组图片再异步请求数据库获取新的图片地址（和分页差不多，可以减小数据库压力），
再动态加载到页面上。主要是图片变换的逻辑JS代码和Json数据的处理。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
