<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.
<html xml:lang="zh-cn" xmlns="http://www. lang="zh-cn"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JS控制图片切换展示效果</title>
<style type="text/css">
html,body,ul,p,h1,h3{margin:0;padding:0;}
html,body{background:#000;color:#FFF;font:bold 14px/2 Georgia, Verdana, Arial, "宋体";text-align:center;}
h3{margin:5px 5px 5px 5px;}
.btn
{
width:70px;
height:25px;
border:0px;
}
img{
width:250px;
height:250px;
vertical-align:top;
border:none;
}
#bq
{
color:red;
}
</style>
</head><body>
<h1>JS控制图片切换展示效果</h1>
<p>请用鼠标点击下面的按钮：</p>
<div id="ceshi">
<div class="tp">
<img id="pic">
</div>
<div class="kz">
<h3><input class="btn" type="button" value="上一张" onclick="prev()"> <input class="btn" type="button" value="下一张" onclick="next()"></h3>
<span id="bq"></span>
</div>
</div>
</body></html>
<script type="text/javascript">
var i=0,j=0,pic=[],str,w,k;
pic[0]="pic2/01.jpg";
//这里根据情况添加图片路径!
pic[1]="pic2/02.jpg";
pic[2]="pic2/03.jpg";
pic[3]="pic2/04.jpg";
pic[4]="pic2/05.jpg";
document.getElementById("pic").src="pic2/03.jpg";
function prev()
{
str=document.getElementById("pic").src;
str=str.toString();
w=str.indexOf("E:");
k=str.substr(11,13);
for (i=0;i<pic.length;i++)
{
if (k==pic[i]){j=i;}
}
if(j==0)
{document.getElementById("bq").innerHTML="已是最前一张图片!";
return;}
document.getElementById("pic").src=pic[j-1];
}
function next()
{
str=document.getElementById("pic").src;
str=str.toString();
w=str.indexOf("E:");
k=str.substr(11,13);
for (i=0;i<pic.length;i++)
{
if (k==pic[i]){j=i;}
}
if(j==pic.length-1)
{
document.getElementById("bq").innerHTML="已是最后一张图片!";
return;}
document.getElementById("pic").src=pic[j+1];
}
</script>
使用时图片路径小心设置！
2010-05-21 22:42
