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

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

<html>
<head>
<meta http-equiv="Content-Type" c>
<meta http-equiv="imagetoolbar" c>
<title>图片左右翻页</title>
<style>

</style>
<script language="javascript">
<!--
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>
<td class="sp"><img name="inphoto" id="inphoto" src="

http://www.2p9p.com/xfdipzone/photo/1.jpg

" ></td>
</tr>
<tr>
<td class="sn"><span id="fn">柳梦璃</span></td>
</tr>
<tr>
<td class="sn">点击图片左右显示上下张</td>
</tr>
</table>
</body>
</html>

您可能感兴趣问答

Collapsible

热门标签

热点问答