jquery仿百度图片幻灯浏览功能
使用jquery来实现百度图片幻灯浏览，先看下效果图：
第一种实现方式，缺点是当浏览到靠后面的图片时页面动态加载元素太多，不支持大数据
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="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第二种，动态加载数据，当然js局部可以做出修改
