经过两天的努力 终于写出了模仿百度的图片幻灯浏览页面，本人还不会写插件，大家多多交流 看这个东西能写成 动态加载数据的插件不，期待各位高手。。。。。
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(
第一种实现方式，缺点是当浏览到靠后面的图片时页面动态加载元素太多，不支持大数据
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(
作者: teenmix
- 该日志由 teenmix 于11年前发表在综合分类下，最后更新于 2012年11月16日.
- 转载请注明: jquery花了很大心思写的仿百度(baidu)图片幻灯浏览，大家多多交流，提出好的建议， | 学步园 +复制链接
抱歉!评论已关闭.