在html里面怎么制作多张图片翻页效果，下面有文字。一点击就进去指定的页面
3个回答
展开全部
用JS脚本制作简单快捷，只需少量代码如下：
<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>
<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>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
兄弟 你要翻页的效果 那就是JS 可以搞的定 而且你说一点就进去的 就是一个连接而已
<A href="#"> 把#换成你的连接的网站就可以 但翻页效果没这么简单
<A href="#"> 把#换成你的连接的网站就可以 但翻页效果没这么简单
本回答被提问者采纳
已赞过
已踩过<
你对这个回答的评价是？
展开全部
用microsoft office powerpoint做，很简单。不会可以Hi我。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
