经过两天的努力 终于写出了模仿百度的图片幻灯浏览页面，本人还不会写插件，大家多多交流 看这个东西能写成 动态加载数据的插件不，期待各位高手。。。。。
第一种实现方式，缺点是当浏览到靠后面的图片时页面动态加载元素太多，不支持大数据
Code1
<%
@ 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; //向下定时器i19
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
//select64
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
else169
{ 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="width: 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
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="width: 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>延伸阅读
- 2011-4-6-- 巧用jquery,用 jQuery 开发游戏：25 款 jQuery 游
- 2011-4-8-- jquery,JQuery-用户名校验
- 2010-11-24-- jquery,jQuery语法总结及注意事项
- 2010-11-24-- jquery常用,学习jQuery之旅--新手必须知道的常用方法
- 2010-12-9-- jquery,Jquery优化效率 提升性能解决方案
- 2010-11-24-- jquery,JQuery优缺点分析说明
- 2010-11-24-- jquery常用,jQuery常用技巧大放送
- 2010-11-24-- jquery,15 Days of jQuery（Day 4）---安全邮件列表
- 2010-11-24-- jquery,从零开始学习jQuery （一） 开天辟地入门篇
- 2010-11-24-- jquery,从零开始学习jQuery （三） 管理jQuery包装集
2010-1-9 at 10:07