码迷,mamicode.com
首页 > Web开发 > 详细

【ASP】多张图片分页显示

时间:2014-11-12 17:57:59      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:vbscript   asp   分页   翻页   图片   

图片翻页在一些漫画、电子书网站中同样起着中流砥柱的作用

反正网页编写的核心就是一页中不能出现太多内容。

图片翻页对比于数据库查询的内容分页显示功能(点击打开链接)简单得多,因为少了很多数据库查询语句,但ASP语句与javascript语句还是存在的。


一、基本目标

首先在images文件下面,有如下6张图片,这6张都是WIN7自带的壁纸:

bubuko.com,布布扣

如果在一些漫画、电子书网站中,这就是N页纸的扫描出来的图片。

编写一个页面,可以自动翻页,当向前向后翻完之后,提示给用户没有了。

bubuko.com,布布扣

点击任一一张图片,能够自动显示原图。这个很简单的,只学过html的程序猿都会了。

bubuko.com,布布扣

最后,下方的下拉菜单提示给用户当前是第几张图片,用户可以自定义要显示第几张图片,这里由于笔者的粗心打少个“页”,忽略这些细节,O(∩_∩)O~呵呵

bubuko.com,布布扣


二、制作过程

具体过程见下面的实现代码,每一段都有注释了,打漏了那个“页”字已经补上

<%@LANGUAGE="VBSCRIPT" CODEPAGE="65001"%>
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片翻页</title>
</head>

<body>
<!--拿走穿过来的id变量与per变量,如果拿不到,那么用户必定是第一次进入这个页面了,默认id为1,从第一张图片开始-->
<%
id=Request.QueryString("id")
if id="" then
id=1
end if
%>
<!--由于有6张图片,所以如果id不在1-6之间就是一个非法值-->
<%
if (id<1 or id>6) then
%>
没有了
<!--给一个浏览器的"后退"链接用户,那就不用考虑id的运算问题了,因为用户翻到这一页使用后退能解决很多问题-->
<a href="javascript:history.go(-1)">返回</a>
<%
else
%>
<!--翻页改变id值即可。设置图片则在新窗口打开,用户不开大图,点关闭即可-->
<!--图片最初以缩略图的形式,一样要定义一个不存在边框的属性,定义了超级链接的图片,默认带一个宽度为1的蓝色的边框-->
<a href="images/<%=id%>.jpg" target="_new"><img src="images/<%=id%>.jpg" width="480" height="320" border="0" /></a><br />
<a href="picpages.asp?id=<%=(id-1)%>">上一页</a>
<!--这里是构造翻页的下拉菜单,注意asp的循环写法,必须以loop来结束一次循环,循环的条件在do while之后,没有t++的自增运算,只能t=t+1-->
第
<select id="page">
<%
t=0
do while cint(t)<6
%>
<!--cint(t)=cint(id)是确定当前翻到第几页,然后下拉查菜单的默认值便是当前页的页数-->
<!--具体出来的编码查看网页的源代码-->
<%if (cint(t+1)=cint(id)) then%>
<option value="<%=t+1%>" selected="selected"><%=t+1%></option>
<%
else
%>
<option value="<%=t+1%>"><%=t+1%></option>
<%
end if
%>
<%
t=t+1
loop
%>
<!--可以不使用respond.write来输出,使用< % = >来输出-->
</select>/6页
<!--跳转页的按钮需要使用到javascript来翻页,见最下面的脚本-->
<input type="button" onclick="gopage()" value="转到该页"/>

<a href="picpages.asp?id=<%=(id+1)%>">下一页</a>
<%
end if
%>
</body>
</html>

<script>
function gopage() {
	/*拿到现在下拉菜单所选择的值,看看用户要跳到第几页,再跳转*/ 
var id=document.getElementById("page").value;
window.location.href = "picpages.asp?id="+id;
} 
</script>


【ASP】多张图片分页显示

标签:vbscript   asp   分页   翻页   图片   

原文地址:http://blog.csdn.net/yongh701/article/details/41044697

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!