求一段将图片进行翻页的代码JS代码
http://koudai.360.cn/u/17149324/photo_152137594.html由如上面的一样，点击箭头就可以切换图片，能给我这段代码吗？谢谢了！...
http://koudai.360.cn/u/17149324/photo_152137594.html
由如上面的一样，点击箭头就可以切换图片，能给我这段代码吗？谢谢了！
怎么没人回答啊，没人知道吗？？ 展开
由如上面的一样，点击箭头就可以切换图片，能给我这段代码吗？谢谢了！
怎么没人回答啊，没人知道吗？？ 展开
1个回答
展开全部
<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>
<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>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
