none
为什么p标签下只放了几个img,p的scrollLeft无法改变,一直是0呢 RRS feed

  • 问题

  • RT:很是奇怪。后来我在img之间加了 可以改变了,但是我不明白为什么只有img是,不能改变,并且加了 改变的很小

    跪请高人指点迷津呀

    源码如下

    <!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>
    <title>左右滚动</title>
    <style type="text/css">
    p{width:270px;height:129px;overflow:hidden;/**/}
    img{width:270px;height:129px;}
    </style>
    </head>
    <body>
    <p id="mp"><img /><img /><img /></p>
    <script type="text/javascript">
    var mp=document.getElementById("mp");
    var imgs=document.getElementsByTagName("img");
    imgs[0].src="http://www.baidu.com/img/baidu_logo_jr_1006_61.gif";
    imgs[1].src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif";
    imgs[2].src="http://www.goojje.com/logo.gif";
    function run(direction){
     var flag=setInterval(running,1);
     function running(){
     if(direction==1) mp.scrollLeft+=3; 
     else mp.scrollLeft-=3; 
     if(mp.scrollLeft % 270==0)clearInterval(flag);
     }
    }
    </script>
    <input value=prev type=button onclick="run(0)" />
    <input value=next type=button onclick="run(1)" />
    </body>
    </html>
    2010年6月1日 6:06

答案

  • 是因为你的<img>不是在一行上,而是都在一列上,
    <!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>
    <title>左右滚动</title>
    <style type="text/css">
    p{width:270px;height:129px;overflow:hidden;/**/}
    img{width:270px;height:129px;}
    </style>
    </head>
    <body>
    <p id="mp"><nobr><img /><img /><img /></nobr></p>
    <script type="text/javascript">
    function run(direction){
    var mp=document.getElementById("mp");
    var imgs=document.getElementsByTagName("img");
    imgs[0].src="http://www.baidu.com/img/baidu_logo_jr_1006_61.gif";
    imgs[1].src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif";
    imgs[2].src="http://www.goojje.com/logo.gif";
     var flag=setInterval(running,1);
     function running(){
    
     if(direction==1) mp.scrollLeft+=3; 
     else mp.scrollLeft-=3; 
     if(mp.scrollLeft % 270==0)clearInterval(flag);
     }
    }
    </script>
    <input value=prev type=button onclick="run(0)" />
    <input value=next type=button onclick="run(1)" />
    </body>
    </html>
    

    【孟子E章】
    2010年6月1日 9:39
    版主

全部回复

  • 有滚动条吗
    【孟子E章】
    2010年6月1日 8:16
    版主
  • 没有的啊,我设置了overflow:hidden了呀,算了我把源码给看看,很简短的一段而已
    2010年6月1日 8:25
  • 是因为你的<img>不是在一行上,而是都在一列上,
    <!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>
    <title>左右滚动</title>
    <style type="text/css">
    p{width:270px;height:129px;overflow:hidden;/**/}
    img{width:270px;height:129px;}
    </style>
    </head>
    <body>
    <p id="mp"><nobr><img /><img /><img /></nobr></p>
    <script type="text/javascript">
    function run(direction){
    var mp=document.getElementById("mp");
    var imgs=document.getElementsByTagName("img");
    imgs[0].src="http://www.baidu.com/img/baidu_logo_jr_1006_61.gif";
    imgs[1].src="http://www.google.com.hk/intl/zh-CN/images/logo_cn.gif";
    imgs[2].src="http://www.goojje.com/logo.gif";
     var flag=setInterval(running,1);
     function running(){
    
     if(direction==1) mp.scrollLeft+=3; 
     else mp.scrollLeft-=3; 
     if(mp.scrollLeft % 270==0)clearInterval(flag);
     }
    }
    </script>
    <input value=prev type=button onclick="run(0)" />
    <input value=next type=button onclick="run(1)" />
    </body>
    </html>
    

    【孟子E章】
    2010年6月1日 9:39
    版主
  •  哦,是这样的啊,可是我没有让他换行的呀,为什么他会不在一行呢?能否也给解释一下

    还有,那个<nobr>我以前怎么没见过呀?

    2010年6月3日 0:28
  • 可你也没有让它不换行啊

     


    【孟子E章】
    2010年6月3日 1:07
    版主