求更改一段图片移动代码

求更改为竖向活动。参看新百度幻灯片
http://image.baidu.com/i?ct=503316480&z=0&tn=baiduimagedetail&word=%CA%FA%CF%F2&in=14538&cl=2&cm=1&sc=0&lm=-1&pn=3&rn=1&di=2367704260&ln=2000&fr=
<!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>
<style type="text/css">
<!--
.rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
.rollBox .LeftBotton{height:52px;width:19px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .RightBotton{height:52px;width:20px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
.rollBox .Cont{width:530px;overflow:hidden;float:left;}
.rollBox .ScrCont{width:10000000px;}
.rollBox .Cont .pic{width:132px;float:left;text-align:center;}
.rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
.rollBox .Cont .pic p{line-height:26px;color:#505050;}
.rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
.rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
.rollBox #List1,.rollBox #List2{float:left;}
-->
</style>
</head>
<body>
<div class="rollBox">
     <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
     <div class="Cont" id="ISL_Cont">
      <div class="ScrCont">
       <div id="List1">
       
        <!-- 图片列表 begin -->
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">风景美如画</a></p>
         </div>       
        
 <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
          <p><a href="#" target="_blank">我爱源码爱好者</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">学习型源码站</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">每一款都测试</a></p>
         </div>
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
          <p><a href="#" target="_blank">你难道不喜欢</a></p>
         </div>
 <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">你太令我失望了</a></p>
         </div>      
         <div class="pic">
          <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
          <p><a href="#" target="_blank">今天早点睡</a></p>
         </div>
        <!-- 图片列表 end -->
        
       </div>
       <div id="List2"></div>
      </div>
     </div>
     <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
    </div>
   </div><script language="javascript" type="text/javascript">
<!--//--><![CDATA[//><!--
//图片滚动列表 mengjia 070816
var Speed = 1; //速度(毫秒)
var Space = 5; //每次移动(px)
var PageWidth = 528; //翻页宽度
var fill = 0; //整体移位
var MoveLock = false;
var MoveTimeObj;
var Comp = 0;
var AutoPlayObj = null;
GetObj("List2").innerHTML = GetObj("List1").innerHTML;
GetObj('ISL_Cont').scrollLeft = fill;
GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
AutoPlay();
function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
function AutoPlay(){ //自动滚动
 clearInterval(AutoPlayObj);
 AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',300000); //间隔时间
}
function ISL_GoUp(){ //上翻开始
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
}
function ISL_StopUp(){ //上翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
  Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrUp(){ //上翻动作
 if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
 GetObj('ISL_Cont').scrollLeft -= Space ;
}
function ISL_GoDown(){ //下翻
 clearInterval(MoveTimeObj);
 if(MoveLock) return;
 clearInterval(AutoPlayObj);
 MoveLock = true;
 ISL_ScrDown();
 MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
}
function ISL_StopDown(){ //下翻停止
 clearInterval(MoveTimeObj);
 if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
  Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
  CompScr();
 }else{
  MoveLock = false;
 }
 AutoPlay();
}
function ISL_ScrDown(){ //下翻动作
 if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
 GetObj('ISL_Cont').scrollLeft += Space ;
}
function CompScr(){
 var num;
 if(Comp == 0){MoveLock = false;return;}
 if(Comp < 0){ //上翻
  if(Comp < -Space){
   Comp += Space;
   num = Space;
  }else{
   num = -Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft -= num;
  setTimeout('CompScr()',Speed);
 }else{ //下翻
  if(Comp > Space){
   Comp -= Space;
   num = Space;
  }else{
   num = Comp;
   Comp = 0;
  }
  GetObj('ISL_Cont').scrollLeft += num;
  setTimeout('CompScr()',Speed);
 }
}
//--><!]]>
</script>
</body>
</html>

解决方案 »

  1.   

    求更改代码为竖向
    <!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>
    <style type="text/css">
    <!--
    .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;}
    .rollBox .LeftBotton{height:52px;width:19px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
    .rollBox .RightBotton{height:52px;width:20px;background:url(http://www.codefans.net/jscss/demoimg/200901/job_mj_069.gif) no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;}
    .rollBox .Cont{width:530px;overflow:hidden;float:left;}
    .rollBox .ScrCont{width:10000000px;}
    .rollBox .Cont .pic{width:132px;float:left;text-align:center;}
    .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;}
    .rollBox .Cont .pic p{line-height:26px;color:#505050;}
    .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
    .rollBox .Cont a:hover{color:#f00;text-decoration:underline;}
    .rollBox #List1,.rollBox #List2{float:left;}
    -->
    </style>
    </head>
    <body>
    <div class="rollBox">
         <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div>
         <div class="Cont" id="ISL_Cont">
          <div class="ScrCont">
           <div id="List1">
           
            <!-- 图片列表 begin -->
             <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" width="109" height="87" /></a>
              <p><a href="#" target="_blank">风景美如画</a></p>
             </div>       
            
     <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /></a>
              <p><a href="#" target="_blank">我爱源码爱好者</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" width="109" height="87" /></a>
              <p><a href="#" target="_blank">学习型源码站</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" width="109" height="87" /></a>
              <p><a href="#" target="_blank">每一款都测试</a></p>
             </div>
             <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /></a>
              <p><a href="#" target="_blank">你难道不喜欢</a></p>
             </div>
     <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" width="109" height="87" /></a>
              <p><a href="#" target="_blank">你太令我失望了</a></p>
             </div>      
             <div class="pic">
              <a href="/" target="_blank"><img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" width="109" height="87" /></a>
              <p><a href="#" target="_blank">今天早点睡</a></p>
             </div>
            <!-- 图片列表 end -->
            
           </div>
           <div id="List2"></div>
          </div>
         </div>
         <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div>
        </div>
       </div><script language="javascript" type="text/javascript">
    <!--//--><![CDATA[//><!--
    //图片滚动列表 mengjia 070816
    var Speed = 1; //速度(毫秒)
    var Space = 5; //每次移动(px)
    var PageWidth = 528; //翻页宽度
    var fill = 0; //整体移位
    var MoveLock = false;
    var MoveTimeObj;
    var Comp = 0;
    var AutoPlayObj = null;
    GetObj("List2").innerHTML = GetObj("List1").innerHTML;
    GetObj('ISL_Cont').scrollLeft = fill;
    GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);}
    GetObj("ISL_Cont").onmouseout = function(){AutoPlay();}
    AutoPlay();
    function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}}
    function AutoPlay(){ //自动滚动
     clearInterval(AutoPlayObj);
     AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',300000); //间隔时间
    }
    function ISL_GoUp(){ //上翻开始
     if(MoveLock) return;
     clearInterval(AutoPlayObj);
     MoveLock = true;
     MoveTimeObj = setInterval('ISL_ScrUp();',Speed);
    }
    function ISL_StopUp(){ //上翻停止
     clearInterval(MoveTimeObj);
     if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0){
      Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
      CompScr();
     }else{
      MoveLock = false;
     }
     AutoPlay();
    }
    function ISL_ScrUp(){ //上翻动作
     if(GetObj('ISL_Cont').scrollLeft <= 0){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth}
     GetObj('ISL_Cont').scrollLeft -= Space ;
    }
    function ISL_GoDown(){ //下翻
     clearInterval(MoveTimeObj);
     if(MoveLock) return;
     clearInterval(AutoPlayObj);
     MoveLock = true;
     ISL_ScrDown();
     MoveTimeObj = setInterval('ISL_ScrDown()',Speed);
    }
    function ISL_StopDown(){ //下翻停止
     clearInterval(MoveTimeObj);
     if(GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0 ){
      Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
      CompScr();
     }else{
      MoveLock = false;
     }
     AutoPlay();
    }
    function ISL_ScrDown(){ //下翻动作
     if(GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth){GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;}
     GetObj('ISL_Cont').scrollLeft += Space ;
    }
    function CompScr(){
     var num;
     if(Comp == 0){MoveLock = false;return;}
     if(Comp < 0){ //上翻
      if(Comp < -Space){
       Comp += Space;
       num = Space;
      }else{
       num = -Comp;
       Comp = 0;
      }
      GetObj('ISL_Cont').scrollLeft -= num;
      setTimeout('CompScr()',Speed);
     }else{ //下翻
      if(Comp > Space){
       Comp -= Space;
       num = Space;
      }else{
       num = Comp;
       Comp = 0;
      }
      GetObj('ISL_Cont').scrollLeft += num;
      setTimeout('CompScr()',Speed);
     }
    }
    //--><!]]>
    </script>
    </body>
    </html>200分一起给，开了两个问题
      

  2.   

    http://topic.csdn.net/u/20090928/22/347f8b69-2605-4cde-b0f4-aa567a4a0374.html
    200分。此问题分数累加
      

  3.   

    在td里面加img元素就行了<html>
    <head>
    <title>move</title>
    <style type="text/css">
    body {
        margin:0;
        padding:0;
    }
    ul,ol {
        margin:0;
        padding:0;
    }
    td div{
        width:150px;
        height:170px;
        border:solid 1px #060;
    }
    </style>
    </head>
    <body>
    <input type="button" onclick="left(this)" value="left"/><input type="button" onclick="right(this)" value="right"/>
    <div style="border:solid 1px #06c;height:200px;width:90%;overflow:hidden" id="inner">
    <table>
    <tr>
    <td><div>a</div></td>
    <td><div>b</div></td>
    <td><div>c</div></td>
    <td><div>d</div></td>
    <td><div>e</div></td>
    <td><div>f</div></td>
    <td><div>g</div></td>
    <td><div>h</div></td>
    <td><div>i</div></td>
    <td><div>j</div></td>
    <td><div>k</div></td>
    <td><div>l</div></td>
    <td><div>m</div></td>
    <td><div>n</div></td>
    <td><div>o</div></td>
    </tr>
    </table>
    </div>
    </body>
    <script type="text/javascript">    var d=document.getElementById("inner");
    var left=function(obj) {
        //alert(d.scrollLeft);
        d.scrollLeft-=156;
    }
    var e=0
    var right=function(obj) {
    //    d.scrollLeft+=156;
        e=d.scrollLeft+156
        run()
    }var run = function(){
        if(d.scrollLeft>=e){d.scrollLeft=e;return;}
        d.scrollLeft+=1;
        setTimeout(run,10);
    }</script>
    </html>
      

  4.   

    查找替换scrollLeft为scrollTop即可，参考http://www.chinca.org中的滚动效果
      

  5.   

    稍微改了一下，左右箭头的图片我改成了上，下，具体位置你自己调整吧，我没有做细节得调整，只是把横向改成了纵向！IE7下测试通过！
    <!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> 
    <style type="text/css"> 
     
    .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;} 
    .rollBox .LeftBotton{height:52px;width:19px;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
    .rollBox .RightBotton{height:52px;width:20px;overflow:hidden;float:left;display:inline;margin:25px 0 0 0;cursor:pointer;} 
    .rollBox .Cont{width:130px;overflow:hidden;float:left;height:528px;} 
    .rollBox .ScrCont{height:10000000px;} 
    .rollBox .Cont .pic{width:132px;float:left;text-align:center;} 
    .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0 auto;} 
    .rollBox .Cont .pic p{line-height:26px;color:#505050;} 
    .rollBox .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;} 
    .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} 
    .rollBox #List1,.rollBox #List2{float:left;} </style> 
    </head> 
    <body> 
    <div class="rollBox"> 
        <div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()">上</div> 
        <div class="Cont" id="ISL_Cont"> 
          <div class="ScrCont"> 
          <div id="List1"> 
          
            <!-- 图片列表 begin --> 
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s1.jpg" width="109" height="87" /> </a> 
              <p> <a href="#" target="_blank">风景美如画 </a> </p> 
            </div>      
            
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s2.jpg" width="109" height="87"  /> </a> 
              <p> <a href="#" target="_blank">我爱源码爱好者 </a> </p> 
            </div> 
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s3.jpg" width="109" height="87" /> </a> 
              <p> <a href="#" target="_blank">学习型源码站 </a> </p> 
            </div> 
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s4.jpg" width="109" height="87" /> </a> 
              <p> <a href="#" target="_blank">每一款都测试 </a> </p> 
            </div> 
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s5.jpg" width="109" height="87" alt="你难道不喜欢" /> </a> 
              <p> <a href="#" target="_blank">你难道不喜欢 </a> </p> 
            </div> 
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s6.jpg" width="109" height="87" /> </a> 
              <p> <a href="#" target="_blank">你太令我失望了 </a> </p> 
            </div>      
            <div class="pic"> 
              <a href="/" target="_blank"> <img src="http://www.codefans.net/jscss/demoimg/wall_s7.jpg" width="109" height="87" /> </a> 
              <p> <a href="#" target="_blank">今天早点睡 </a> </p> 
            </div> 
            <!-- 图片列表 end --> 
            
          </div> 
          <div id="List2"> </div> 
          </div> 
        </div> 
        <div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()">下</div> 
        </div> 
    <script language="javascript" type="text/javascript"> 
    <!--//--> <![CDATA[//> <!-- 
    //图片滚动列表 mengjia 070816 
    var Speed = 1; //速度(毫秒) 
    var Space = 5; //每次移动(px) 
    var PageHeight = 528; //翻页宽度 
    var fill = 0; //整体移位 
    var MoveLock = false; 
    var MoveTimeObj; 
    var Comp = 0; 
    var AutoPlayObj = null; 
    GetObj("List2").innerHTML = GetObj("List1").innerHTML; 
    GetObj('ISL_Cont').scrollLeft = fill; 
    GetObj("ISL_Cont").onmouseover = function(){clearInterval(AutoPlayObj);} 
    GetObj("ISL_Cont").onmouseout = function(){AutoPlay();} 
    AutoPlay(); 
    function GetObj(objName){if(document.getElementById){return eval('document.getElementById("'+objName+'")')}else{return eval('document.all.'+objName)}} 
    function AutoPlay(){ //自动滚动 
    clearInterval(AutoPlayObj); 
    AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();',300000); //间隔时间 
    } 
    function ISL_GoUp(){ //上翻开始 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    MoveTimeObj = setInterval('ISL_ScrUp();',Speed); 
    } 
    function ISL_StopUp(){ //上翻停止 
    clearInterval(MoveTimeObj);
    if (GetObj('ISL_Cont').scrollTop % PageHeight - fill != 0) {
        Comp = fill - (GetObj('ISL_Cont').scrollTop % PageHeight); 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
    } 
    function ISL_ScrUp(){ //上翻动作
        if (GetObj('ISL_Cont').scrollTop <= 0) { GetObj('ISL_Cont').scrollTop = GetObj('ISL_Cont').scrollTop + GetObj('List1').offsetHeight }
    GetObj('ISL_Cont').scrollTop -= Space; 
    } 
    function ISL_GoDown(){ //下翻 
    clearInterval(MoveTimeObj); 
    if(MoveLock) return; 
    clearInterval(AutoPlayObj); 
    MoveLock = true; 
    ISL_ScrDown(); 
    MoveTimeObj = setInterval('ISL_ScrDown()',Speed); 
    } 
    function ISL_StopDown(){ //下翻停止 
    clearInterval(MoveTimeObj);
    if (GetObj('ISL_Cont').scrollTop % PageHeight - fill != 0) {
        Comp = PageHeight - GetObj('ISL_Cont').scrollTop % PageHeight + fill; 
      CompScr(); 
    }else{ 
      MoveLock = false; 
    } 
    AutoPlay(); 
    } 
    function ISL_ScrDown(){ //下翻动作
        if (GetObj('ISL_Cont').scrollTop >= GetObj('List1').scrollHeight) { GetObj('ISL_Cont').scrollTop = GetObj('ISL_Cont').scrollTop - GetObj('List1').scrollHeight; }
        GetObj('ISL_Cont').scrollTop += Space; 
    } 
    function CompScr(){ 
    var num; 
    if(Comp == 0){MoveLock = false;return;} 
    if(Comp < 0){ //上翻 
      if(Comp < -Space){ 
      Comp += Space; 
      num = Space; 
      }else{ 
      num = -Comp; 
      Comp = 0; 
      }
      GetObj('ISL_Cont').scrollTop -= num; 
      setTimeout('CompScr()',Speed); 
    }else{ //下翻 
      if(Comp > Space){ 
      Comp -= Space; 
      num = Space; 
      }else{ 
      num = Comp; 
      Comp = 0; 
      }
      GetObj('ISL_Cont').scrollTop += num; 
      setTimeout('CompScr()',Speed); 
    } 
    } 
    //--> <!]]> 
    </script> 
    </body> 
    </html> 
      

  6.   

    把文中scrollLeft改成了scrollTop ，scrollWidth改成了scrollHeight，显示的div层的宽度改为高度，原理就是这样，左右滚和上下滚，原理一样的。
      

  7.   


    <html>
        <head>
            <title>move</title>
            <style type="text/css">
                body {
                    margin:0;
                    padding:0;
                }
                ul,ol {
                    margin:0;
                    padding:0;
                }
                td div{
                    width:150px;
                    height:149px;
                    border:solid 1px #060;
                }
            </style>
        </head>
        <body>
            <input type="button" onclick="left(this)" value="UP" style="float:right;width:15%" />        <div style="height:90%;width:15%;float:right;overflow:hidden;magin-top:20px;clear:both" id="inner">
                <table align="center">
                    <tr>
                        <td><div>a</div></td></tr>
                    <tr><td><div>b</div></td></tr>
                    <tr><td><div>c</div></td></tr>
                    <tr><td><div>d</div></td></tr>
                    <tr><td><div>e</div></td></tr>
                    <tr><td><div>f</div></td></tr>
                    <tr><td><div>g</div></td></tr>
                    <tr><td><div>h</div></td></tr>
                    <tr><td><div>i</div></td></tr>
                    <tr><td><div>j</div></td></tr>
                    <tr><td><div>k</div></td></tr>
                    <tr><td><div>l</div></td></tr>
                    <tr><td><div>m</div></td></tr>
                    <tr><td><div>n</div></td></tr>
                    <tr><td><div>o</div></td></tr>
                    </tr>
                </table>
            </div>
            <input type="button" onclick="right(this)" style="width:15%;float:right;clear:both" value="Down"/>
            <div style="width:80%;height:90%;border:solid 1px red;"></div>
        </body>
        <script type="text/javascript">
            window.onload=function(){
                
            }
            var d=document.getElementById("inner");
            var left=function(obj) {
                //alert(d.scrollLeft);
                runleft()
            }
            var runleft=function(){
                if(d.scrollTop<=d.height){d.scrollTop=0;return;}
                d.scrollTop-=1;
                setTimeout(runleft,10);
            }
            var e=0
            var right=function(obj) {
                //    d.scrollLeft+=156;
                e=d.scrollTop+156
                run()
            }        var run = function(){
                if(d.scrollTop>=e){d.scrollTop=e;return;}
                d.scrollTop+=1;
                setTimeout(run,10);
            }    </script>
    </html>