<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>纵向的JS相册效果</title>
<link rel="StyleSheet" href="ll.css" type="css/text">
</head>
<script language="JavaScript" type="text/JavaScript">
function $ (e) 
  {
return document.getElementById(e);
  }
document.getElementsByClassName=function(cl) 
{
       var retnode=[];
       var myclass=new RegExp('\\b' +cl+' \\b' );
       var elem=this.getElementsByTagName('*');
       for (var i=0;i<elem.length;i++)
          {
               var classes=elem[i].className;
               if (myclass.test(classes))
                    retnode.push(elem[i]);
          }
       return retnode;
};
var MyMar;
var speed=1;//速度,越大越慢
var spec=1;//每次滚动的间距,越大滚动越快
var ipath='images/';//图片路径
var thumb=document.getElementsByClassName('thumb_img');
for (var i=0;i<thumb.length;i++)
     {
          thumbs[i].onmouseover=function() 
             {
               $('main_img').src=this.rel;
               $('main_img').link=this.link;
             };
          thumbs[i].onclick=function()
             {
                location=this.link;   
             };
     }
$('main_img').onclick=function()
{
     location=this.link;
};
$('gotop').onmouseover=function()
{
     this.src=ipath+'2.jpeg';
     MyMar=setInterval(gotop,speed);
};
$('gotop').onmouseout=function()
{
this.src=ipath+'2.jpeg';
clearInterval(MyMar);
};
$('gobottom').onmouseover=function()
{
this.src=ipath+'9.jpeg';
MayMar=setInterval(gobottom,speed);
};
$('gobottom').onmouseout=function()
{
this.src=ipath+'9.jpeg';
clearInterval(MyMar);
};
function gotop()
{
$('showArea').scrolltop-=spec;
}
function gobottom()
{
$('showArea').scrolltop+=spec;
return $('showArea').scrolltop
location=this.link;
}
</script>
<body>
   <table width="760" border="0" align="center" cellpadding="0" cellspacing="5">
     <tr>
       <td height="75" colspan="2" align="left" class="txt_1"> JavaScript相册效果</td>
     </tr>
     <tr>
       <td width="640" align="center">
          <img src="E:\图片\mypicture\1.jpeg" width="640" height="400" border="0" id="main_img" >
       </td>
       <td width="110" align="center" valign="top">
          <img src="E:\图片\mypicture\2.jpeg" width="100" height="54" id="gotop" alt="#">
            <div id="showArea">
              <img src="E:\图片\mypicture\3.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\3.jpeg">
              <img src="E:\图片\mypicture\4.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\4.jpeg">
              <img src="E:\图片\mypicture\5.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\5.jpeg">
              <img src="E:\图片\mypicture\6.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\6.jpeg">
              <img src="E:\图片\mypicture\7.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\7.jpeg">
              <img src="E:\图片\mypicture\8.jpeg" alt="#" width="80" height="50" border="0" class="thumb_img" src="E:\图片\mypicture\8.jpeg">
            </div>
          <img src="E:\图片\mypicture\9.jpeg" width="100" height="53" id="gobottom" alt="#">
  <input type="button" value="下一张" onclick="gobottom()"/>
       </td>
     </tr>
   </table>
  <br/>
 <p>&nbsp;</p>
</body>
</html>

解决方案 »

  1.   

    what 叫动态响应?????
      

  2.   

    firebug 提示gobottom()不是一个函数
      

  3.   

    函数名和DOM ID一样了,而且你的初始化事件代码要放到body后面或者放在window.onload中,要不找不到对象你那个位置放置js代码window.onload=function(){var thumb=document.getElementsByClassName('thumb_img');
    for (var i=0;i<thumb.length;i++)
      {
      thumbs[i].onmouseover=function() 
      {
      $('main_img').src=this.rel;
      $('main_img').link=this.link;
      };
      thumbs[i].onclick=function()
      {
      location=this.link;  
      };
      }
    $('main_img').onclick=function()
    {
      location=this.link;
    };
    $('gotop').onmouseover=function()
    {
      this.src=ipath+'2.jpeg';
      MyMar=setInterval(gotop,speed);
    };
    $('gotop').onmouseout=function()
    {
    this.src=ipath+'2.jpeg';
    clearInterval(MyMar);
    };
    $('gobottom').onmouseover=function()
    {
    this.src=ipath+'9.jpeg';
    MayMar=setInterval(gobottom,speed);
    };
    $('gobottom').onmouseout=function()
    {
    this.src=ipath+'9.jpeg';
    clearInterval(MyMar);
    };}