首页 > 代码库 > 【ASP】多张图片分页显示

【ASP】多张图片分页显示

2024-08-01 17:45:32   221人阅读

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

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

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


一、基本目标

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


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

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


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


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



二、制作过程

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

<%@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】多张图片分页显示


联系
我们