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