在html里面怎么制作多张图片翻页效果，下面有文字。一点击就进去指定的页面
最新回答
上帝的女孩
2024-06-05 05:45:32
<html>
<head>
<meta http-equiv="Content-Type" c>
<meta http-equiv="imagetoolbar" c>
<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>
<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>
一朵有毒の花
2024-06-05 10:38:36
<A href="#"> 把#换成你的连接的网站就可以 但翻页效果没这么简单
乱世浮华つ
2024-06-05 00:32:32
热门标签
