一个左右滚动的javascript代码如何改动成上下滚动的？附代码

图片水平滚动
文件img.html
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>滚动图片</title>
</head>
<body>
<div style="width:90%; text-align:center">
<iframe name="mq" marginwidth="0" marginheight="0" src="img_data/mq.htm" frameborder="no" height="185" scrolling="no" width="750"></iframe>
<iframe name="mq" marginwidth="0" marginheight="0" src="img_data/mqhx.htm" frameborder="no" height="0" scrolling="no" width="0"></iframe>
</div>
</body>
</html>
文件mqhx.htm
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>mqhx滚动图片</title><script language="JavaScript">
<!--//
var x = 0;
var y = 0;
var limdex = 800;
var dest = 0;
var distance = 0;
var step = 0;
var destination = 0;
var on = true;function scrollnow() {
          if (on){
                if (x < limdex & x >= 0 ) {              
                                parent.frames[0].scroll(x,0);
                            
                        x = x + 1;
                        
                        setTimeout('scrollnow()', 2);
        
                }
                else if (x < 0) {
                
                        x = limdex;
                        scrollnow();
                }
             else {
                
                 x=0;
                scrollnow();
                }
           }}// *********************************function stopscroll() {
        if (on){
        on = false;
        }
        else {
        on = true;
        scrollnow();
        }
        
}
function startscroll() { on = true; scrollnow(); }
function stop_start() { 
if (on){ on = false;}else { on = true;scrollnow();}
}scrollnow();//***********************************//--></script>
</body></html>
文件mq.htm<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>mq滚动图片</title>
<style type="text/css">
img
{
width:120px;
height:155px;
margin-left:10px;
margin-right:10px;
border: 1px solid rgb(0, 0, 0);
margin-bottom:5px;}
#font1
{
font-size:12px;
text-decoration:none;
}
</style>
</head>
<body>
<table style="margin-top: 5px;" align="center" border="0" cellpadding="0" cellspacing="0" height="130">
  <tbody>
  <tr>
     <td align="center" width="150"><img  src="mq_data/001.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/002.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/003.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/004.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/005.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/006.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/007.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/008.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
<td align="center" width="150"><img src="mq_data/009.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>
</tr>
</tbody></table>
</body></html>
替换图片就可以了

解决方案 »

  1.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <meta name="Copyright" content="懒人 />
    <meta name="description" content="学会偷懒，并懒出境界是提高工作效率最有效的方法！" />
    <meta content="懒人" name="keywords" />
    <title>懒人</title>
    </head><body><DIV id=marquees><A href="javascript:">1,你可曾有过无数的梦想，</A><BR><BR><A 
    href="javascript:">2,却在时光的流逝里幻灭 </A><BR><BR><A 
    href="javascript:">3,你可曾对未来期待憧憬，</A><BR><BR><A 
    href="javascript:">4,却在成长的岁月中迷失</A><BR><BR></DIV>
    <SCRIPT language=JavaScript>marqueesHeight=200;
    stopscroll=false;with(marquees){
      style.width=0;
      style.height=marqueesHeight;
      style.overflowX="visible";
      style.overflowY="hidden";
      noWrap=true;
      onmouseover=new Function("stopscroll=true");
      onmouseout=new Function("stopscroll=false");
    }
    document.write('<div id="templayer" style="position:absolute;z-index:1;visibility:hidden"></div>');preTop=0; currentTop=0; function init(){
      templayer.innerHTML="";
      while(templayer.offsetHeight<marqueesHeight){
        templayer.innerHTML+=marquees.innerHTML;
      }
      marquees.innerHTML=templayer.innerHTML+templayer.innerHTML;
      setInterval("scrollUp()",20);//越大越慢
    }
    document.body.onload=init;function scrollUp(){
      if(stopscroll==true) return;
      preTop=marquees.scrollTop;
      marquees.scrollTop+=1;
      if(preTop==marquees.scrollTop){
        marquees.scrollTop=templayer.offsetHeight-marqueesHeight;
        marquees.scrollTop+=1;
      }
    }
    </SCRIPT></body>
    </html>
      

  2.   

    垂直滚动
    img.html文件
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>滚动图片</title>
    </head>
    <body>
    <div style="width:90%; text-align:center">
    <iframe name="mq" marginwidth="0" marginheight="0" src="img_data/mq.htm" frameborder="no" height="185" scrolling="no" width="750"></iframe>
    <iframe name="mq" marginwidth="0" marginheight="0" src="img_data/mqhx.htm" frameborder="no" height="0" scrolling="no" width="0"></iframe>
    </div>
    </body>
    </html>
    mqhx.htm文件
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>mqhx滚动图片</title><script language="JavaScript">
    <!--//
    var x = 0;
    var y = 0;
    var limdey = 800;
    var dest = 0;
    var distance = 0;
    var step = 0;
    var destination = 0;
    var on = true;function scrollnow() {
              if (on){
                    if (x < limdey & y >= 0 ) {              
                                    parent.frames[0].scroll(0,y);
                                
                            y = y + 1;
                            
                            setTimeout('scrollnow()', 2);
            
                    }
                    else if (y < 0) {
                    
                            y = limdey;
                            scrollnow();
                    }
                 else {
                    
                     y=0;
                    scrollnow();
                    }
               }}// *********************************function stopscroll() {
            if (on){
            on = false;
            }
            else {
            on = true;
            scrollnow();
            }
            
    }
    function startscroll() { on = true; scrollnow(); }
    function stop_start() { 
    if (on){ on = false;}else { on = true;scrollnow();}
    }scrollnow();//***********************************//--></script>
    </body></html>mq.htm文件
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>mq滚动图片</title>
    <style type="text/css">
    img
    {
    width:120px;
    height:155px;
    margin-left:10px;
    margin-right:10px;
    border: 1px solid rgb(0, 0, 0);
    margin-bottom:5px;}
    #font1
    {
    font-size:12px;
    text-decoration:none;
    }
    </style>
    </head>
    <body>
    <table style="margin-top: 5px;" align="center" border="0" cellpadding="0" cellspacing="0" height="130">
      <tbody>
      <tr>
         <td align="center" width="150"><img  src="mq_data/001.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
    <td align="center" width="150"><img src="mq_data/002.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
    <td align="center" width="150"><img src="mq_data/003.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
    <td align="center" width="150"><img src="mq_data/004.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
            <td align="center" width="150"><img src="mq_data/005.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
            <td align="center" width="150"><img src="mq_data/006.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
            <td align="center" width="150"><img src="mq_data/007.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
    <td align="center" width="150"><img src="mq_data/008.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td></tr>
      <tr>
    <td align="center" width="150"><img src="mq_data/009.jpg" onmouseover="javascript:parent.frames[1].stopscroll();" onmouseout="javascript:parent.frames[1].startscroll();" ></td>   </tr>
    </tbody></table>
    </body></html>注意文件和图片的存放路径。
      

  3.   

    <style type="text/css">
    #a{height:150px;width:80px;padding:5px;overflow:hidden;border:1px solid #000000;}
    #b{margin:0px;padding:0px;}
    </style>
    <body onLoad="haa()">
    <div id="a">
    <div id="b">22222222<br>
    </div>
    </div>
    <script>
    function $(sId){return document.getElementById(sId)} 
    var a = $('a'); 
    var b = $('b'); 
    function haa(){
      var o = b.cloneNode(true); 
      a.appendChild(o); 
      setTimeout("haa()",5)
    }
    function Scroll(){ a.scrollTop +=1; } 
    window.setInterval("Scroll()",50);  
    </script>
    其实我是想害你
    这么写应该有害吧    个人这么认为   没花时间去验证
      

  4.   

    你怎能看出来我没有改过，我改的一踏糊涂还能贴过来啊，我在本地dream上改的行不，贴在这里的是别人给我发的原版行不！
    你对分不敢兴趣也给你一分，我故意的！