jquery花了很大心思写的仿百度(baidu)图片幻灯浏览，大家多多交流，提出好的建议，...

最新推荐文章于 2020-08-25 10:35:58 发布

9栋108

最新推荐文章于 2020-08-25 10:35:58 发布

阅读量78

点赞数

原文链接：http://www.cnblogs.com/huhu456/archive/2009/09/19/1569814.html

版权

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

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

Code
1

@ Page Language="C#" AutoEventWireup="true" CodeFile="ImgShow.aspx.cs" Inherits="testbaidu_ImgShow" %>
2

<!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

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

//传入值
21

var posti=7;
22

var postion=2;//每次定位到第二个
23

//状态初始化
25

$(function()

{
26

SetPosition();
27

SetSliderPreClass(false);
28

SetSlidereNextClass(false);
29

//处理向上按钮事件
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

//处理向下按钮事件
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

//鼠标移动到按钮的事件
61

$("#slidePre").hover(function()

{ SetSliderPreHoverClass(); }, function()

{ SetSliderPreClass(); });
62

$("#slideNext").hover(function()

{ SetSliderNextHoverClass(); }, function()

{ SetSlidereNextClass(); });
63

//select
64

});
67

function TrggleEvent()
69

{
70

$("#imgList p").click(function()

{
71

//alert("oh yes");
72

posti= $("#imgList p").index($(this));
74

SetPosition();
75

SetSliderPreClass(false);
77

SetSlidereNextClass(false);
78

//alert($(this).attr("class"));
79

});
80

}
81

//向上按钮点击函数
85

function PreDel()

{
86

if (i > 0)

{
87

i--; showImg(i);
88

SetSliderPreClass(true);
89

SetSlidereNextClass(false);
90

}
91

}
92

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局部可以做出修改

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">

<title>模拟百度图片浏览</title>

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>

<h1>

百度图片浏览模拟程序</h1>

</div>

<tr>

图片名称：

</td>

</tr>

</table>

<tr>

</td>

</tr>

</table>

<tr>

</td>

<span class="rate">预览图比例：<span class="fontBar" id="rate"></span></span>

</td>

</td>

</tr>

</table>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

以上两种都能实现效果，可能是思路那里设计的有问题，总觉得别扭，期待高人指点

看到这么多朋友对这个感兴趣，都希望贴代码，那我就不客气了

不过谁有更好点的都贴上来供大家研究吧

转载于:https://www.cnblogs.com/huhu456/archive/2009/09/19/1569814.html

9栋108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery花了很大心思写的仿百度(baidu)图片幻灯浏览，大家多多交流，提出好的建议，...

经过两天的努力终于写出了模仿百度的图片幻灯浏览页面，本人还不会写插件，大家多多交流看这个东西能写成动态加载数据的插件不，期待各位高手。。。。。第一种实现方式，缺点是当浏览到靠后面的图片时页面动态加载元素太多，不支持大数据Code1<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="ImgShow.aspx.c...
复制链接

扫一扫