求在div代码里加入js滚动效果

 <!-- 首页及商品列表页面团购部分模板 -->
<!-- {if $group_buy_goods.data or $editing} -->
<div id="group_buy" class="colbox">
  <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
  <div class="colboxcontent">
    <ul>
      <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
      <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
      <li>
        <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
        <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
      </li>
      <!-- {/if} -->
      <!-- {/foreach} 团购商品 -->
    </ul>
  </div>
  <div class="colbtm"></div>
</div>
<!-- {/if} --> 在这段代码里加入从右往左滚动的效果.要求点击图片停止.移开接着滚动. 

解决方案 »

  1.   


    <div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">
        <table align="left" cellpadding="0" cellspace="0" border="0">
          <tr>
            <td id="demo1" valign="top"><table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><img src="indexgd/001.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/002.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/003.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/004.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/005.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/006.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/007.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/008.gif" width="143" height="200" /></td>
                </tr>
            </table></td>
            <td id="demo2" valign="top"></td>
          </tr>
        </table>
    </div>
    <script>
      var speed=8//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
          }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function(){clearInterval(MyMar)}
      demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    </script>
      

  2.   

    参见：dhScroll Ver2.0.0 左右横向无缝滚动多功能TabStrip MagicSwitch
      

  3.   

    http://hero2009.csdn.net/我要象上面的地址中。精彩照片栏目里的效果。 滚动时永远不留空白
      

  4.   


     <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div class="colboxcontent">
        <ul>
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>
      <marquee direction=right scrollamount=2 scrolldelay=90 width="100%"> 
            <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
       </marquee>
            <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          </li>
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
        </ul>
      </div>
      <div class="colbtm"></div>
    </div>
    <!-- {/if} --> 
      

  5.   

    <html>
    <script src="jquery-1.3.2.js"></script>
    <body onload=""> 
    <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div class="colboxcontent">
        <ul>
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>
          <marquee direction=left scrollamount=2 scrolldelay=90 width="100%" onMouseOver="stop()" onMouseOut="start()"> 
            <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
           </marquee>
            <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          </li>
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
        </ul>
      </div>
      <div class="colbtm"></div>
    </div>
    <!-- {/if} --> </body>
    </html>你说的都立起来是什么意思啊?
      

  6.   

    <html>
    <script src="jquery-1.3.2.js"></script>
    <body onload=""> 
    <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div class="colboxcontent">
        <ul>      
    <marquee direction=left scrollamount=2 scrolldelay=90 width="100%" onMouseOver="stop()" onMouseOut="start()"> 
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>        <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>        <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          </li>
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
           </marquee>    </ul>
      </div>
      <div class="colbtm"></div>
    </div>
    <!-- {/if} --> </body>
    </html>
    这样试试
      

  7.   

    http://www.web-pifa.com/我传上去了.看下.滚是开始滚了.但留多大的空白呢? 感觉很难看的样子. 
      

  8.   


    <div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">
        <table align="left" cellpadding="0" cellspace="0" border="0">
          <tr>
            <td id="demo1" valign="top"><table border="0" cellpadding="0" cellspacing="0">
                <tr>
                  <td><img src="indexgd/001.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/002.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/003.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/004.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/005.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/006.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/007.gif" width="143" height="200" /></td>
                  <td><img src="indexgd/008.gif" width="143" height="200" /></td>
                </tr>
            </table></td>
            <td id="demo2" valign="top"></td>
          </tr>
        </table>
    </div>
    <script>
      var speed=8//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
          }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function(){clearInterval(MyMar)}
      demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    </script>怎么把这段代码加到我上面的那段代码中呢？ 
      

  9.   

    ======================
    你的是样式表造成的。ul li 这个你设置下！！！
      

  10.   


    .colboxcontent marquee ul{margin:0px;padding:0px;}
      

  11.   

    <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">
      <div id="demo1" class="colboxcontent">
        <ul>
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>
            <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
            <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          </li>
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
        </ul>
      </div>
      <div id="demo2" class="colbtm" valign="top"></div>
    </div>
    </div>
    <script>
      var speed=8//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
          }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function(){clearInterval(MyMar)}
      demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    </script>
      

  12.   

    <DIV id=marquee3 style="OVERFLOW: hidden; WIDTH:920px">
                <TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
                  <TBODY>
                  <TR>
                    <TD id=marquee3_1>
                      <TABLE cellSpacing=0 cellPadding=0 width="920px" border=0>
                        <TBODY>
                        <TR >
                          <TD 
                          style="PADDING-RIGHT: 2px; PADDING-LEFT:2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/1.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT:2px; PADDING-LEFT:2px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/2.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><a 
                            href="#"><img 
                            src="uploadfile/3.jpg" 
                            width=120 height=80 border="0" 
                            class=p></a></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/4.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/5.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV><A 
                            href="#"><IMG 
                            src="uploadfile/6.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/8.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD>
                          <TD 
                          style="PADDING-RIGHT: 5px; PADDING-LEFT: 5px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px">
                            <DIV align="center"><A 
                            href="#"><IMG 
                            src="uploadfile/7.jpg" 
                            width=120 height=80 border="0" 
                            class=p></A></DIV>
                            <DIV style="PADDING-TOP: 5px" align="center"><A 
                            href="#">校园风采</A></DIV></TD></TR></TBODY></TABLE></TD>
                    <TD id=marquee3_2></TD></TR></TBODY></TABLE></DIV>
                <SCRIPT language=javascript>
    var marqueeVar3;
    document.getElementById('marquee3_2').innerHTML = document.getElementById('marquee3_1').innerHTML;
    marqueeVar3 = window.setInterval("marquee(3, 'right')", 20);
    document.getElementById('marquee3').onmouseover = function(){window.clearInterval(marqueeVar3);}
    document.getElementById('marquee3').onmouseout = function(){marqueeVar3 = window.setInterval('marquee(3, "right")', 20);}
    function marquee(i, direction)
    {
    var obj = document.getElementById("marquee" + i);
    var obj1 = document.getElementById("marquee" + i + "_1");
    var obj2 = document.getElementById("marquee" + i + "_2"); if (direction == "up")
    {
    if (obj2.offsetTop - obj.scrollTop <= 0)
    {
    obj.scrollTop -= (obj1.offsetHeight + 20);
    }
    else
    {
    var tmp = obj.scrollTop;
    obj.scrollTop++;
    if (obj.scrollTop == tmp)
    {
    obj.scrollTop = 1;
    }
    }
    }
    else
    {
    if (obj2.offsetWidth - obj.scrollLeft <= 0)
    {
    obj.scrollLeft -= obj1.offsetWidth;
    }
    else
    {
    obj.scrollLeft++;
    }
    }
    }
    </SCRIPT>
      

  13.   

    无缝滚动，marquee即可
    参考http://blog.csdn.net/lihan6415151528/archive/2009/03/19/4003830.aspx
      

  14.   

    转一个uch的:function startMarquee(h, speed, delay, sid) {
    var t = null;
    var p = false;
    var o = $(sid);
    o.innerHTML += o.innerHTML;
    o.onmouseover = function() {p = true}
    o.onmouseout = function() {p = false}
    o.scrollTop = 0;
    function start() {
        t = setInterval(scrolling, speed);
        if(!p) {
    o.scrollTop += 2;
    }
    }
    function scrolling() {
        if(p) return;
    if(o.scrollTop % h != 0) {
            o.scrollTop += 2;
            if(o.scrollTop >= o.scrollHeight/2) o.scrollTop = 0;
        } else {
            clearInterval(t);
            setTimeout(start, delay);
        }
    }
    setTimeout(start, delay);
    }html代码:<ul class="line_list" id="scrollbody" style="height: 250px; overflow:hidden;"><li><a href="space-1119304.html">领航礼品</a>又往好友的<a href="userapp.php?id=1021978&amp;my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>里使坏。</li>
    <li><a href="space-1118813.html">小天UV灯</a> 正在“<a href="userapp.php?id=1016668&amp;my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">笑傲江湖</a>”里打拼</li>
    <li><a href="space-1118813.html">小天UV灯</a> 在 <a href="userapp.php?id=1011554&amp;my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">超级大富翁</a> 中进行了买卖</li><li><a href="space-729898.html">中国一号网</a> 在 <a href="userapp.php?id=1011554&amp;my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">超级大富翁</a> 中进行了买卖</li>
    <li><a href="space-1125151.html">环球筛网</a> 今天登录<a href="userapp.php?id=1003094&amp;my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">争车位</a>游戏获赠200元游戏币！</li>
    <li><a href="space-1125151.html">环球筛网</a> 和 <a href="space-1128136.html">mytaffy</a> 成为了好友</li><li><a href="space-1119304.html">领航礼品</a>的勤劳有了回报，TA的<a href="userapp.php?id=1021978&amp;my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>收获了一批果实。</li>
    <li><a href="space-1125151.html">环球筛网</a> 和 <a href="space-361696.html">ovovo</a> 成为了好友</li>
    <li><a href="space-1107731.html">zl888</a> 今天登录<a href="userapp.php?id=1003094&amp;my_suffix=L2luZGV4LnBocA%3D%3D" target="_top">争车位</a>游戏获赠200元游戏币！</li><li><a href="space-1119292.html">金杉密封</a>又往好友的<a href="userapp.php?id=1021978&amp;my_suffix=L3VzZXJhcHAucGhwP2lkPTEwMjE5Nzg%3D" target="_top">《开心农场》</a>里使坏。</li>
    </ul>
    <script>startMarquee(250, 60, 0, 'scrollbody');</script>
      

  15.   

    <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div class="colboxcontent">
        <ul>
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>
            <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
            <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          </li>
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
        </ul>
      </div>
      <div class="colbtm"></div>
    </div>
    <!-- {/if} --> 为上面这段代码求图片无缝滚动效果。  上面的一些代码留白的不行，还有一些是我不会套用。 是否有人帮我修改下上面的这段代码。使上面的这段代码里的图片实现无缝滚动。从左或从左全行。 因为图行是左右排行的。
      

  16.   

    <!-- 首页及商品列表页面团购部分模板 -->
    <!-- {if $group_buy_goods.data or $editing} -->
    <div id="group_buy" class="colbox">
      <h3><em class="more"><a href="{url src=index.php?app=groupbuy}">{$lang.more}</a></em>{$lang.group_buy}</h3>
      <div class="colboxcontent"><div id="demo" style="overflow:hidden;height:210;width:560;color:#ffffff">
        <table align="left" cellpadding="0" cellspace="0" border="0">
          <tr>
            <td id="demo1" valign="top"><table border="0" cellpadding="0" cellspacing="0">
                <tr>
                      <ul>
          <!-- {foreach name=group_buy from=$group_buy_goods.data item=gbgoods} 团购商品 -->
          <!-- {if $smarty.foreach.group_buy.iteration lte 6} -->
          <li>
          <a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}"><img src="{image file=$gbgoods.default_image width=100 height=100}" alt="{$gbgoods.orig_name}" /></a>
          <p class="infolist"><span class="name"><a href="{url src=index.php?app=groupbuy&amp;act=detail&amp;id=$gbgoods.act_id}">{$gbgoods.act_name|escape}</a></span><span class="price">{$gbgoods.ext.price|price}</span></p>
          < >
          <!-- {/if} -->
          <!-- {/foreach} 团购商品 -->
        </ul>

                </tr>
            </table></td>
            <td id="demo2" valign="top"></td>
          </tr>
        </table>
    </div>
      </div>
      <div class="colbtm"></div>
    </div>
    <!-- {/if} -->
    <script>
      var speed=8//速度数值越大速度越慢
      document.getElementById("demo2").innerHTML=document.getElementById("demo1").innerHTML
      function Marquee(){
          if(document.getElementById("demo2").offsetWidth-document.getElementById("demo").scrollLeft<=0)
            document.getElementById("demo").scrollLeft-=document.getElementById("demo1").offsetWidth
          else{
            document.getElementById("demo").scrollLeft++
          }
      }
      var MyMar=setInterval(Marquee,speed)
      demo.onmouseover=function(){clearInterval(MyMar)}
      demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}
    </script>