经过两天的努力 终于写出了模仿百度的图片幻灯浏览页面,本人还不会写插件,大家多多交流 看这个东西能写成 动态加载数据的插件不,期待各位高手。。。。。

第一种实现方式,缺点是当浏览到靠后面的图片时页面动态加载元素太多,不支持大数据

Code
1
<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgShow.aspx.cs" Inherits="testbaidu_ImgShow" %>
2
3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
<html xmlns="http://www.w3.org/1999/xhtml">
5
<head runat="server">
6
<title>模拟百度图片浏览</title>
7
<link href="css/Style.css" rel="stylesheet" type="text/css" />
8
9
<script src="../JavaScript/JQuery/Jquery.js" type="text/javascript"></script>
10
11
<script language="javascript" type="text/javascript">
12
var count = 9; //总记录数
13
var showCount = 4; //每页显示数
14
var pageIndex = 0; //当前页码
15
var pageCount = 10; //每页加载数
16
var i = 0; //当前翻转值,不能大于总数减去每页数
17
var myTimepre; //向上定时器
18
var myTimenext; //向下定时器i
19
20
//传入值
21
var posti=7;
22
var postion=2;//每次定位到第二个
23
24
//状态初始化
25
$(function()
{
26
SetPosition();
27
SetSliderPreClass(false);
28
SetSlidereNextClass(false);
29
30
//处理向上按钮事件
31
$("#slidePre").click(function()
{
32
PreDel();
33
});
34
//处理向上按钮事件
35
$("#slidePre").mousedown(function()
{
36
myTimepre = window.setInterval(function()
{
37
PreDel();
38
}, 120);
39
});
40
//关闭
41
$("#slidePre").mouseup(function()
{
42
window.clearInterval(myTimepre);
43
});
44
45
//处理向下按钮事件
46
$("#slideNext").click(function()
{
47
NextDel();
48
});
49
//处理向下按钮事件
50
$("#slideNext").mousedown(function()
{
51
myTimenext = window.setInterval(function()
{
52
NextDel();
53
}, 120);
54
});
55
//关闭
56
$("#slideNext").mouseup(function()
{
57
window.clearInterval(myTimenext);
58
});
59
60
//鼠标移动到按钮的事件
61
$("#slidePre").hover(function()
{ SetSliderPreHoverClass(); }, function()
{ SetSliderPreClass(); });
62
$("#slideNext").hover(function()
{ SetSliderNextHoverClass(); }, function()
{ SetSlidereNextClass(); });
63
//select
64
65
66
});
67
68
function TrggleEvent()
69
{
70
$("#imgList p").click(function()
{
71
//alert("oh yes");
72
73
posti= $("#imgList p").index($(this));
74
SetPosition();
75
76
SetSliderPreClass(false);
77
SetSlidereNextClass(false);
78
//alert($(this).attr("class"));
79
});
80
}
81
82
83
84
//向上按钮点击函数
85
function PreDel()
{
86
if (i > 0)
{
87
i--; showImg(i);
88
SetSliderPreClass(true);
89
SetSlidereNextClass(false);
90
}
91
}
92
93
function NextDel()
{
94
if (i < count - showCount)
{
95
i++;
96
LoadData()
97
showImg(i);
98
SetSlidereNextClass(true);
99
SetSliderPreClass(false);
100
}
101
}
102
103
104
105
//设置正常状态下向上按钮样式
106
function SetSliderPreClass(isclick)
{
107
108
if (i > 0)
{
109
if (!isclick)
{
110
$("#slidePre").removeClass();
111
$("#slidePre").addClass("preNormal");
112
}
113
}
114
else
{
115
$("#slidePre").removeClass();
116
$("#slidePre").addClass("preNone");
117
}
118
119
}
120
121
//设置正常状态下向下按钮样式
122
function SetSlidereNextClass(isclick)
{
123
if (i >= count - showCount)
{
124
$("#slideNext").removeClass();
125
$("#slideNext").addClass("nextNone");
126
$("#ImgOn").removeClass().addClass("lastPage");
127
}
128
else
{
129
if (!isclick)
{
130
$("#slideNext").removeClass();
131
$("#slideNext").addClass("nextNormal");
132
$("#ImgOn").removeClass().addClass("nextPage");
133
}
134
}
135
136
}
137
138
//设置鼠标滑动下向上按钮样式
139
function SetSliderPreHoverClass()
{
140
if ($("#slidePre").attr("class") != "preNone")
{
141
$("#slidePre").removeClass();
142
$("#slidePre").addClass("preHover");
143
}
144
}
145
146
//设置鼠标滑动下向上按钮样式
147
function SetSliderNextHoverClass()
{
148
if ($("#slideNext").attr("class") != "nextNone")
{
149
$("#slideNext").removeClass();
150
$("#slideNext").addClass("nextHover");
151
}
152
153
}
154
155
// 关键函数:通过控制top ,来显示不通的幻灯片
156
function showImg(i)
{
157
$("#imgList").stop(true, false).animate(
{ top: -125 * i }, 120);
158
}
159
160
function LoadData()
{
161
var tempindex=0;
162
if (pageIndex * pageCount - showCount < i)
{
163
//动态先添加数据,计算需要加载的条数
164
var curLoadCount = 0;
165
if ((count - pageIndex * pageCount) / pageCount > 1)
{
166
curLoadCount = pageCount;
167
}
168
else
169
{ curLoadCount = count % pageCount; }
170
for (k = 0; k < curLoadCount; k++)
{
171
$('<p class="noselect"><img src="images/loadTree.gif" /></p>').appendTo($("#imgList"));
172
}
173
tempindex =pageIndex;
174
// $.get("ImgContent.aspx",{ pageIndex: pageIndex, pageCount: pageCount }, function(imgurls){
175
// retarr=imgurls.split(',');
176
// for (k = 0; k < curLoadCount; k++) {
177
// $("#imgList p").eq(tempindex * pageCount+k).find("img").attr("src",retarr[k]);
178
// }
179
//
180
// //绑定后台数据
181
// });
182
$.ajax(
{
183
type: "get",
184
url: "ImgContent.aspx",
185
data: "pageIndex="+ pageIndex+"&pageCount="+pageCount,
186
async: false,
187
success: function(imgurls)
{
188
retarr=imgurls.split(',');
189
for (k = 0; k < curLoadCount; k++)
{
190
$("#imgList p").eq(tempindex * pageCount+k).find("img").attr("src",retarr[k]);
191
}
192
}
193
});
194
TrggleEvent();
195
pageIndex++;
196
LoadData();
197
}
198
}
199
200
//初始化定位
201
function SetPosition()
202
{
203
if(posti+1-(showCount-postion)>0&&posti+1-(showCount-postion)<count-showCount)
204
{
205
i=posti+1-(showCount-postion);
206
}
207
else if(posti+1-(showCount-postion)>=count-showCount)
208
{
209
i=count-showCount;
210
}
211
LoadData();
212
$("#imgList p").eq(posti).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
213
showImg(i);
214
$("#ImgOn").attr("src",$("#imgList p").eq(posti).find("img").attr("src"));
215
}
216
217
218
219
</script>
220
221
</head>
222
<body>
223
<form id="form1" runat="server">
224
<div style="text-align: center">
225
<h1>
226
百度图片浏览模拟程序</h1>
227
</div>
228
<div id="imgContainer">
229
<div id="detailImg">
230
<table id="imgFrom" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
231
<tr>
232
<td style="text-align: center">
233
图片名称:
234
</td>
235
</tr>
236
</table>
237
<table id="picWrap">
238
<tr>
239
<td id="srcPic" align="center" valign="middle">
240
<img id="ImgOn" src="" width="600px" height="450px" />
241
</td>
242
</tr>
243
</table>
244
<table id="picInfo">
245
<tr>
246
<td width="38%" align="left">
247
<span id="imgTitle" style="font-size: 12px"></span>
248
</td>
249
<td align="right">
250
<span class="rate">预览图比例:<span class="fontBar" id="rate"></span></span>
251
</td>
252
<td style=" 70px" align="left">
253
<a href="javascript:void(0)" class="zoomsrc" id="zoomSrc">查看原图</a>
254
</td>
255
</tr>
256
</table>
257
</div>
258
<div id="album">
259
<div id="slidePre" class="preNormal">
260
261
</div>
262
<div id="smallImgs">
263
<div id="imgList">
264
</div>
265
</div>
266
<div id="slideNext">
267
268
</div>
269
</div>
270
</div>
271
</form>
272
</body>
273
</html>
274
第二种,动态加载数据,当然js局部可以做出修改

Code

<%
@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgSlider2.aspx.cs" Inherits="testbaidu_ImgSlider2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>模拟百度图片浏览</title>
<link href="css/Style.css" rel="stylesheet" type="text/css" />

<script src="../JavaScript/JQuery/Jquery.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">

var showCount = 4//每页显示数
var count = 9; //总记录数
var postion = 2; //每次定位到第二个

var i = 0; //轮转值
//传入值
var postindex = 6;
var loadStart = 0;
var loadEnd = 0;
var myTimepre; //向上定时器
var myTimenext; //向下定时器i

//第一次计算仅仅是初始化计算

function setLoadStartAndEnd()
{
//为了便于理解没有进行等式的简化
//只显示当前页的图片

if (postindex + 1 - postion > 0 && postindex <= count - showCount)
{
loadStart = postindex - postion + 1;
loadEnd = postindex - postion + showCount;
}
//向下按钮为灰色

else if (postindex > count - showCount)
{
loadStart = count - showCount;
loadEnd = count - 1;
}
//向上按钮为灰色

else if (postindex + 1 - postion <= 0)
{
loadStart = 0;
loadEnd = showCount - 1;
}
}


//计算出数值后开始加载数据

function loadData()
{
// alert(loadStart);
// alert(loadEnd);
$("#imgList").html("");

for (j = loadStart; j <= loadEnd; j++)
{
$('<p class="noselect"><img imgindex="' + j + '" src="../temp/' + j + '.jpg" /></p>').appendTo($("#imgList"));

}
TrggleEvent();
//alert($("#imgList").html());
}

//设置正常状态下向上按钮样式

function SetSliderPreClass(isclick)
{


if (loadStart > 0)
{

if (!isclick)
{
$("#slidePre").removeClass();
$("#slidePre").addClass("preNormal");
}
}

else
{
$("#slidePre").removeClass();
$("#slidePre").addClass("preNone");
}

}

//设置正常状态下向下按钮样式

function SetSlidereNextClass(isclick)
{

if (loadEnd >= count - 1)
{
$("#slideNext").removeClass();
$("#slideNext").addClass("nextNone");
$("#ImgOn").removeClass().addClass("lastPage");
}

else
{

if (!isclick)
{
$("#slideNext").removeClass();
$("#slideNext").addClass("nextNormal");
$("#ImgOn").removeClass().addClass("nextPage");
}
}

}

//设置鼠标滑动下向上按钮样式

function SetSliderPreHoverClass()
{

if ($("#slidePre").attr("class") != "preNone")
{
$("#slidePre").removeClass();
$("#slidePre").addClass("preHover");
}
}

//设置鼠标滑动下向上按钮样式

function SetSliderNextHoverClass()
{

if ($("#slideNext").attr("class") != "nextNone")
{
$("#slideNext").removeClass();
$("#slideNext").addClass("nextHover");
}

}


function PreDel()
{

if (loadStart > 0)
{
temp = $("#imgList").html();
$("#imgList").html("");
$('<p class="noselect"><img alt="" imgindex="' + (loadStart - 1) + '" src="../temp/' + (loadStart - 1) + '.jpg" /></p>').appendTo($("#imgList"));
$(temp).appendTo($("#imgList"));
temp = "";
$("#imgList").css("top", "-125");
postindex--;
loadStart--;
loadEnd--;

$("#imgList").stop(true, false).animate(
{ top: 0 }, 120);

window.setTimeout(function()
{
$("#imgList p").eq(4).remove();
SetSliderPreClass(true);
SetSlidereNextClass(false);
TrggleEvent();
}, 120);
}
}


function NextDel()
{

if (loadEnd < count - 1)
{
$('<p class="noselect"><img alt="" imgindex="' + (loadEnd + 1) + '" src="../temp/' + (loadEnd + 1) + '.jpg" /></p>').appendTo($("#imgList"));
postindex++;
loadStart++;
loadEnd++;

$("#imgList").stop(true, false).animate(
{ top: -125 }, 120);

window.setTimeout(function()
{
$("#imgList").css("top", "0");
$("#imgList p").eq(0).remove();
SetSliderPreClass(false);
SetSlidereNextClass(true);
TrggleEvent();
}, 150);


}

}


$(function()
{
setLoadStartAndEnd();
loadData();
SetPosition();
//鼠标移动到按钮的事件

$("#slidePre").hover(function()
{ SetSliderPreHoverClass(); }, function()
{ SetSliderPreClass(false); });

$("#slideNext").hover(function()
{ SetSliderNextHoverClass(); }, function()
{ SetSlidereNextClass(false); });
SetSliderPreClass(false);
SetSlidereNextClass(false);

//处理向上按钮事件

$("#slidePre").click(function()
{

if ($("#slidePre").attr("class") != "preNone")
{
PreDel();
}

});

//处理向上按钮事件

$("#slidePre").mousedown(function()
{

myTimepre = window.setInterval(function()
{
PreDel();
}, 150);
});
//关闭

$("#slidePre").mouseup(function()
{
window.clearInterval(myTimepre);
});


//处理向下按钮事件

$("#slideNext").click(function()
{

if ($("#slideNext").attr("class") != "nextNone")
{
NextDel();
}

});

//处理向下按钮事件

$("#slideNext").mousedown(function()
{

myTimenext = window.setInterval(function()
{
NextDel();
}, 150);
});
//关闭

$("#slideNext").mouseup(function()
{
window.clearInterval(myTimenext);
});

});



function SetPosition()
{
//为了便于理解没有进行等式的简化
//只显示当前页的图片

if (postindex + 1 - postion > 0 && postindex <= count - showCount)
{
$("#imgList p").eq(1).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(1).find("img").attr("src"));
}
//向下按钮为灰色

else if (postindex > count - showCount)
{
$("#imgList p").eq(postindex - (count - showCount)).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(postindex - (count - showCount)).find("img").attr("src"));
}
//向上按钮为灰色

else if (postindex + 1 - postion <= 0)
{
//alert(postindex);
$("#imgList p").eq(postindex).siblings("p").removeClass().addClass("noselect").end().removeClass().addClass('select');
$("#ImgOn").attr("src", $("#imgList p").eq(postindex).find("img").attr("src"));
}

}


function TrggleEvent()
{
//选中图片的处理程序

$("#imgList p").click(function()
{
//alert($(this).find("img").attr("imgindex"));
postindex = parseInt($(this).find("img").attr("imgindex"));
setLoadStartAndEnd();
loadData();
SetPosition();
SetSliderPreClass(false);
SetSlidereNextClass(false);
});
}
</script>

</head>
<body>
<form id="form1" runat="server">
<div style="text-align: center">
<h1>
百度图片浏览模拟程序</h1>
</div>
<div id="imgContainer">
<div id="detailImg">
<table id="imgFrom" cellpadding="0" cellspacing="0" style="margin: 0 auto;">
<tr>
<td style="text-align: center">
图片名称:
</td>
</tr>
</table>
<table id="picWrap">
<tr>
<td id="srcPic" align="center" valign="middle">
<img id="ImgOn" src="" width="600px" height="450px" />
</td>
</tr>
</table>
<table id="picInfo">
<tr>
<td width="38%" align="left">
<span id="imgTitle" style="font-size: 12px"></span>
</td>
<td align="right">
<span class="rate">预览图比例:<span class="fontBar" id="rate"></span></span>
</td>
<td style=" 70px" align="left">
<a href="javascript:void(0)" class="zoomsrc" id="zoomSrc">查看原图</a>
</td>
</tr>
</table>
</div>
<div id="album">
<div id="slidePre" class="preNormal">
</div>
<div id="smallImgs">
<div id="imgList">
</div>
</div>
<div id="slideNext" class="nextNormal">
</div>
</div>
</div>
</form>
</body>
</html>

以上两种都能实现效果,可能是思路那里设计的有问题,总觉得别扭,期待高人指点
看到这么多朋友对这个感兴趣,都希望贴代码,那我就不客气了
不过谁有更好点的 都贴上来供大家研究吧