在html里面怎么制作多张图片翻页效果，下面有文字。一点击就进去指定的页面_随笔

用JS脚本制作简单快捷，只需少量代码如下：

<html>

<head>

<title>图片左右翻页</title>

<style>

<!--

body{

text-align:center

margin:20px 0px 0px 0px

}

table{

border:0px

}

.sp{

width:520px

height:400px

border:2px solid #FFCC00

text-align:center

line-height:400px

}

.sn{

width:520px

height:30px

text-align:center

line-height:30px

}

img{

border:0px

cursor:pointer

}

-->

</style>

<!--

var photo=new Array(4)

var photoname=new Array(4)

photo[0]="http://www.2p9p.com/xfdipzone/photo/1.jpg"

photoname[0]="柳梦璃"

photo[1]="http://www.2p9p.com/xfdipzone/photo/2.jpg"

photoname[1]="韩菱纱"

photo[2]="http://www.2p9p.com/xfdipzone/photo/3.jpg"

photoname[2]="云天河"

photo[3]="http://www.2p9p.com/xfdipzone/photo/4.jpg"

photoname[3]="慕容紫英"

var currid=0

function showphoto(){

if(window.event.x>window.screen.width/2){

currid=currid+1

}else{

currid=currid-1

}

if(currid>=4){

currid=0

}else if(currid<0){

currid=3

}

inphoto.src=photo[currid]

fn.innerHTML=photoname[currid]

}

function changestyle(o){

if(window.event.offsetX>=o.clientWidth/2){

o.style.cursor="url("+"http://www.2p9p.com/xfdipzone/photo/next.ani"+")"

o.alt="点击显示下一张"

}else{

o.style.cursor="url("+"http://www.2p9p.com/xfdipzone/photo/pre.ani"+")"

o.alt="点击显示上一张"

}

function preloadimage(){

photo1=new Image()

photo1.src="http://www.2p9p.com/xfdipzone/photo/1.jpg"

photo2=new Image()

photo2.src="http://www.2p9p.com/xfdipzone/photo/2.jpg"

photo3=new Image()

photo3.src="http://www.2p9p.com/xfdipzone/photo/3.jpg"

photo4=new Image()

photo4.src="http://www.2p9p.com/xfdipzone/photo/4.jpg"

photopre=new Image()

photopre.src="http://www.2p9p.com/xfdipzone/photo/pre.ani"

photonext=new Image()

photonext.src="http://www.2p9p.com/xfdipzone/photo/next.ani"

}

-->

</script>

</head>

<body >

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

<td class="sn">点击图片左右显示上下张</td>

</tr>

</table>

</body>

</html>

HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：

1、html5页面代码

<!DOCTYPE html>

<title>HTML5手机页面触屏滑动上下翻页特效</title>

</head>

</div>

</div>

</section>

</section>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

</section>

</section>

</body></html>

2、css代码：

@charset "utf-8"

.ad_foot li { margin:0 auto 1emfont-size:1.8empadding:15pxbackground:#FFF}

.ad_foot li a {display:block}

.ad_foot li .l {width:75pxheight:75pxfloat:leftoverflow:hidden}

.ad_foot li .l img {width:75pxwidth:75px}

.ad_foot li .r {width:78%float:leftmargin-left:30pxcolor:#666overflow:hidden}

.ad_foot li .r p {color:#999font-size:1.2em}

.ad_foot li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

.lazy-img, .lazy-finish{background-color:#f0eded}

.page-list{font-size:20pxfont-family: "Microsoft yahei"padding-left:17pxpadding-top:30pxheight:35pxborder-bottom:1px solid #b5b5b5display:none}

.ad_foot{padding:15px 15px 0 15px}

/*声音播放按钮*/

#song_img {width:293pxheight:41pxdisplay:blockposition:absoluteright:4.1emtop:1.6emfont-size:1.7emtext-align:centerline-height:41pxcolor:#FFFbackground:url(../img/music_c3.png) no-repeat 0 0}

/*底部推荐*/

.ad_list{margin-top:2em}.ad_list li {width:46%background:nonepadding:0float:leftmargin-bottom: 1em}

.ad_list li.r {float:right}.ad_list li a img {width:100%height:auto}

.ad_foot h3 {width:100%height:48pxline-height:48pxbackground:#F9F5EC}

.ad_foot h3 a {display:inline-blockcolor:#444width:50%text-align:centerfont-size:1.5emheight:48pxborder-bottom:2px solid #FF9240}

.ad_foot h3 a.active {color:#FFFbackground:#FF9240}

.magazine_1 li {

width:100%

margin-bottom: 1em

font-size: 1.8em

padding: 15px

background: #FFF}

.magazine_1 li a {display:block}

.magazine_1 li .l {width: 75px

height: 75px

float: left

overflow: hidden}

.magazine_1 li .l img {width:75pxheight:75px}

.magazine_1 li .r {width: 78%

float: left

margin-left: 30px

color: #666

overflow: hidden}

.magazine_1 li .r p {

color: #999

font-size: 1.2em

.magazine_1 li .r span {font-size:0.8em}

.ad_foot li .r i {font-style:normal}

3、运行效果如下：

1,快速解决你问题的方法

你下的模版页码上a标签

设置为空了，如果你想让它模拟跳转的效果

可以将href='#'修改为href="xxx.html"

xxx.html以你自己命名的文件为准，文件夹下要有这个文件

然后再xxx.html里面设置<a href="index.html">页码1</a>

这样两个页面就可以来回跳了。

以上是静态页面之间的跳转，实质上的网页应用以更

高级的方式跳转

2,静态切换式的分页原理

在页面潜伏5个不同的DIV块。

显示其中之1，隐藏其他4个。

利用javascript代码，为页码添加点击事件，当页码改变的时候

显示指定的块style="display:''"，影藏其他4个块style="display:none"，达到视觉上的分页效果。

3，利用服务器端语言或者AJAX的动态分页

这个才算真正的分页了。

服务器驱动，比如PHP语言，点击页码时传递分页参数，服务器刷新整个页面。

（页面是刷新了整个页面，但是只改变了分页区域的显示，所以视觉上的差异是部分）

AJAX ，JAVASCRIPT利用异步更新获取其他新的分页区域，等到获取完毕时，只局部刷新

需要更新的区域，所以不会有视觉抖动，整个页面也不会被刷新

PS:最近话说得有点多。。。大概开发太寂寞。。。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zaji/6114896.html

在html里面怎么制作多张图片翻页效果，下面有文字。一点击就进去指定的页面

发表评论

评论列表（0条）