用javascript做简单的带说明的幻灯片


这是我在书上看到的一段代码,在这里记下来,提醒自己:

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<div>
 <img id="myPic" src="images/1.jpg" alt="MM1" /> 
</div>
<br />
<div id="allText">

</div>

<div>
<input name="上一张" id="btnPrev" type="button" value="上一张" />
<input name="下一张" id="btnNext" type="button" value="下一张" />
</div>
<script language="javascript" type="text/javascript">
window.onload=initAll;
var currImg=0;
var allText=new Array("MM1","MM2","MM3","MM4","MM5","MM6","MM7");
function initAll()
{
  document.getElementById("allText").innerHTML=allText[0];
  document.getElementById("btnPrev").onclick=btnPrev;
  document.getElementById("btnNext").onclick=btnNext;
}
function btnPrev()
{
  newSlide(-1);
}
function btnNext()
{
 newSlide(1);
}
function newSlide(direction)
{
  var allTextNum=allText.length;
   currImg=currImg+direction;
  //alert(direction);
  //alert(currImg);
  if(currImg<0)
  {
    currImg=allTextNum-1;
  }
  if(currImg==allTextNum)
  {
   currImg=0;
  }
  //alert(currImg);
  document.getElementById("allText").innerHTML=allText[currImg];
  document.getElementById("myPic").src="images/"+(currImg+1)+".jpg";
  
}
</script>

</body>
</html>

posted on 2008-04-21 08:38  鱼跃于渊  阅读(250)  评论(0)    收藏  举报

导航