如何让一行图片在一单元格中首尾相接连续滚动，就是看不到此单元格背景的那种？

http://www.gl-itc.org/
首页上有你要的效果，自己扒代码。怎么最近这么多人要这个东西？
过两天搞成htc放出来。

解决方案 »

  1.   

    你可以用marquee
    比如
    <script>
    function scroll()
    {
    var s=""
    for(i=0;i<100;i++)
    {
    s + = document.getElementById("test").innerHTML;
    }
    document.getElementById("test").innerHTML = s;
    }
    </script>
    <body onload=scroll()>
    <marquee id="test">   this dfasdfa  dfasdf d fasdf a     </marquee>
      

  2.   

    aotianlong(初中没毕业) 
    你用marquee写一个然后和我那个比较一下就知道差别在什么地方了。
      

  3.   

    xinyunyishui(心云意水) 
    我知道有差别，但是这样简单呀。呵呵。
      

  4.   

    <script>
    function scroll()
    {
    var s="";
    for(i=0;i<100;i++)
    {
    s += document.getElementById("test").innerHTML;
    }
    document.getElementById("test").innerHTML = s;
    }
    </script>
    <body onload=scroll()>
    <marquee id="test" scrollamount=2 onmouseover=stop() onmouseout=start()>   this dfasdfa  dfasdf d fasdf a     </marquee>就这个，你看看有什么不一样。
      

  5.   

    <script>
    function scroll()
    {
    var s="";
    for(i=0;i<100;i++)
    {
    s += document.getElementById("test").innerHTML;
    }
    document.getElementById("test").innerHTML = s;
    }
    </script>
    <body onload=scroll()>
    <marquee id="test" scrollamount=2 onmouseover=stop() onmouseout=start()>   this dfasdfa  dfasdf d fasdf a     </marquee>就这个，你看看有什么不一样。
      

  6.   

    aotianlong(初中没毕业) 我把你的正文部分用一个一行一列的表替换，但浏览的效果是出现好多行（至少几十行）从窗口右向左边移动。
      

  7.   

    我帮你扒了个简单的^_^,如果想要用图片,只要把注释的那部分加上去,然后把最里层的table去掉就可以了
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE> New Document </TITLE>
    <META NAME="Generator" CONTENT="EditPlus">
    <META NAME="Author" CONTENT="">
    <META NAME="Keywords" CONTENT="">
    <META NAME="Description" CONTENT="">
    </HEAD><BODY>
    <div style="width:452px;height:48px;overflow:hidden"> 
    <table width="452" border="0" cellspacing="0" cellpadding="0" id="scrollimg">
    <tr> 
    <td id="simg">
    <!--<img class="coolAlpha" src="s1.gif" width="109" height="48"><img class="coolAlpha" src="s3.gif" width="115" height="48"><img class="coolAlpha" src="s4.gif" width="114" height="48"><img class="coolAlpha" src="s5.gif" width="114" height="48">
    //-->
    <TABLE width="452" border="0">
    <tr><td>asdfas ad324 asdf</td></tr>
    </TABLE>
    </td>
    <td id="simg1"></td>
    </tr>
    </table>
    </div>
    </BODY>
    </HTML>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    function newsScroll() {
    if(scrollimg.parentNode.scrollLeft!=(scrollimg.clientWidth/2))
    scrollimg.parentNode.scrollLeft++;
    else
    scrollimg.parentNode.scrollLeft=0}function window.onload() {
    simg1.innerHTML=simg.innerHTML
    setInterval('newsScroll()',50) 
    } //-->
    </SCRIPT>
      

  8.   

    呵呵~，谢楼上的。
    其实，这个很早就有人问过了。请楼主下次多搜索一下。
    代码比较简单，所以我当时也就没有什么注释。<div style="width:452px;height:48px;overflow:hidden"> 
    <table width="452" border="0" cellspacing="0" cellpadding="0" id="scrollimg">
    <tr> 
    <td id="simg">
    <!--<img class="coolAlpha" src="s1.gif" width="109" height="48"><img class="coolAlpha" src="s3.gif" width="115" height="48"><img class="coolAlpha" src="s4.gif" width="114" height="48"><img class="coolAlpha" src="s5.gif" width="114" height="48">
    //-->
                      <!--class="coolAlpha"是特定的css效果，用于htc的，请自行修改（不影响滚动效果）-->
    <TABLE width="452" border="0">
    <tr><td>asdfas ad324 asdf</td></tr>
    </TABLE>
    </td>
    <td id="simg1"></td>
    </tr>
    </table>
    </div>
    <SCRIPT LANGUAGE="JavaScript">
    function newsScroll() {
    if(scrollimg.parentNode.scrollLeft!=(scrollimg.clientWidth/2))
    scrollimg.parentNode.scrollLeft++;
    else
    scrollimg.parentNode.scrollLeft=0
    }function window.onload() {
    simg1.innerHTML=simg.innerHTML
    setInterval('newsScroll()',50) 
    }
    </SCRIPT>
      

  9.   

    to  aotianlong(初中没毕业) 区别是滚动1次之后出现的……你所做的是将滚动的内容重复写入了100次，短时间内不会出问题（一次滚动之内）。
    东西少就罢了，如果多，内存消耗……
      

  10.   

    xinyunyishui(心云意水) 
    我知道的，我只是叫他做个参考罢了。
      

  11.   

    三个文件：index.htm:
    <table border="0" cellpadding="0" cellspacing="0" width="100%" height="150">
    <tr>
    <td width="100%">
    <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
    <IFRAME src="a.htm" name="move" width="100%"  height="150" scrolling="no" marginwidth="0" marginheight="0" frameborder="no">
    <!--webbot bot="HTMLMarkup" endspan -->
    <!--webbot bot="HTMLMarkup" startspan TAG="XBOT" -->
    </IFRAME>
    <!--webbot bot="HTMLMarkup" endspan -->
    </td>
    </tr>
    </table>
    </center></div>
    <div align="center"><center>
    <table border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td>
    <!--webbot bot="HTMLMarkup" startspan -->
    <IFRAME src="b.htm" name="move" width="0" height="0" scrolling="no" marginwidth="0" marginheight="0" frameborder="no"><!--webbot bot="HTMLMarkup" endspan -->
    <!--webbot bot="HTMLMarkup" startspan -->
    </IFRAME>
    <!--webbot bot="HTMLMarkup" endspan -->
    </td>
    </tr>
    </table>a.htm
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>title</title>
    </head>
    <body>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td width="200"><img src="p1.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p2.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p3.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p4.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p5.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p1.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p2.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p3.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p4.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
        <td width="200"><img src="p5.jpg" width="200" height="150" onmouseover="javascript:parent.frames[1].stopscroll();"
        onmouseout="javascript:parent.frames[1].startscroll();"></td>
      </tr>
    </table>
    </body>
    </html>b.htm:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <script language="JavaScript">
    <!--//
    var x = 0; //起始位置
    var y = 0;
    var limdex = 1000; //一个周期的图片总宽度，过了这个宽度即跳现下一周期
    var dest = 0;
    var distance = 0;
    var step = 0;
    var destination = 0;
    var on = true;
    function scrollit(destination) {
    step = 2;
    dest = destination;
    if (x<dest & x < limdex){
    while (x<dest) {
    step += (step / 2);
    x += step;
    parent.frames[0].scroll(x,0);
    }  
    if(dest <=limdex) { parent.frames[0].scroll(dest,0); }
    x = dest;
    }
    if (x > dest)  {
    while (x>dest) {
    step += (step / 2);
    if(x >= (0+step)) { x -= step; parent.frames[0].scroll(x,0); }
    else break;
    }
    if(dest >= 0) { parent.frames[0].scroll(dest,0); }
    x = dest;
    }
    if (x<1) { parent.frames[0].scroll(1,0); x=1 }
    if (x>limdex) { parent.frames[0].scroll(limdex,0); x=limdex }
    x = dest;
    }function scrollnow() {
                    if (on){
                    if (x < limdex & x >= 0 ) {              
                                    parent.frames[0].scroll(x,0);
                            x = x + 1;
                            setTimeout('scrollnow()', 8);
                    }
                    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>
    <title>title</title>
    </head>
    <body>
    </body>
    </html>