图片翻页在一些漫画、电子书网站中同样起着中流砥柱的作用
反正网页编写的核心就是一页中不能出现太多内容。
图片翻页对比于数据库查询的内容分页显示功能(点击打开链接)简单得多,因为少了很多数据库查询语句,但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>
原文地址:http://blog.csdn.net/yongh701/article/details/41044697