查看此帖的完整版本：如何让图片无间断的连续循环滚动？阅读 9030 次

作者：bjgeo 2008/6/17 17:13:42

如何让图片无间断的连续循环滚动？

如何让图片无间断的连续循环滚动？ <marquee>标签能否实现？如果实现不了有没有其他代码可以实现？

如图中不要留空白。要图片连续无间断的滚动

作者：小轲 2008/6/17 22:54:55
作者：bjgeo 2008/6/23 10:21:15


想问一下，控制滚动方向的代码在哪？谢谢
作者：小轲 2008/6/23 11:22:15

图片向左滚动的代码
      <DIV id=demo
      style="OVERFLOW: hidden; WIDTH: 768px; COLOR: #ffffff; HEIGHT: 179px">
      <TABLE cellSpacing=0 cellPadding=0 width=1239 align=left border=0
      cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top>
<table height="179"  border="0" cellpadding="0" cellspacing="0" width="1241">
            <tr>
              <td width="180" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/53/60053/p2.gif" border="0"></a></div></td>
              <td width="183" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/11/91911/p2.gif" border="0"></a>
                </div></td>
              <td width="178" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/19/64019/p2.gif" border="0"></a></div></td>
              <td width="177" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1400/53/51253/p2.gif" border="0"></a></div></td>
              <td width="179" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/64/58064/p2.gif" border="0"></a></div></td>
              <td width="184" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/68/60368/p2.gif" border="0"></a></div></td>
              <td width="182" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1400/05/61505/p2.gif" border="0"></a></div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top width=1>　</TD></TR></TBODY></TABLE></DIV>
<SCRIPT>
var speed3=25//速度数值越大速度越慢
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetWidth-demo.scrollLeft<=0)
demo.scrollLeft-=demo1.offsetWidth
else{
demo.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed3)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}
</SCRIPT>

作者：小轲 2008/6/23 11:23:49

图片向右滚动的代码
      <DIV id=demo
      style="OVERFLOW: hidden; WIDTH: 768px; COLOR: #ffffff; HEIGHT: 179px">
      <TABLE cellSpacing=0 cellPadding=0 width=1239 align=left border=0
      cellspace="0">
        <TBODY>
        <TR>
          <TD id=demo1 vAlign=top>
<table height="179"  border="0" cellpadding="0" cellspacing="0" width="1241">
            <tr>
              <td width="180" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/53/60053/p2.gif" border="0"></a></div></td>
              <td width="183" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/11/91911/p2.gif" border="0"></a>
                </div></td>
              <td width="178" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/19/64019/p2.gif" border="0"></a></div></td>
              <td width="177" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1400/53/51253/p2.gif" border="0"></a></div></td>
              <td width="179" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/64/58064/p2.gif" border="0"></a></div></td>
              <td width="184" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1080/68/60368/p2.gif" border="0"></a></div></td>
              <td width="182" background="http://www.kesonic.com/nic/pic/2.jpg"><div align="center">
    <a target="_blank" href="http://www.kesonic.com/kc/business/">
    <img src="http://img.mms.sohu.com/mms/1400/05/61505/p2.gif" border="0"></a></div></td>
            </tr>
          </table></TD>
          <TD id=demo2 vAlign=top width=1>　</TD></TR></TBODY></TABLE></DIV>
<script>
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollLeft=demo.scrollWidth
function Marquee(){
if(demo.scrollLeft<=0)
demo.scrollLeft+=demo2.offsetWidth
else{
demo.scrollLeft--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
作者：小轲 2008/6/23 11:28:16

图片向上滚动的代码

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="http://img.mms.sohu.com/mms/1400/53/51253/p2.gif"><br><img src="http://img.mms.sohu.com/mms/1080/64/58064/p2.gif"><br><img src="http://img.mms.sohu.com/mms/1080/68/60368/p2.gif"><br></div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

作者：小轲 2008/6/23 11:29:25

图片向下滚动的代码

<div id=demo style="overflow:hidden; width:128px; height:300px;">
<div id=demo1>
<img src="
http://img.mms.sohu.com/mms/1400/53/51253/p2.gif"><br><img src="
http://img.mms.sohu.com/mms/1080/64/58064/p2.gif"><br><img src="http://img.mms.sohu.com/mms/1080/68/60368/p2.gif"><br> </div>
<div id=demo2></div>
</div>
<script language="javascript">
var speed=30
demo2.innerHTML=demo1.innerHTML
demo.scrollTop=demo.scrollHeight
function Marquee(){
if(demo1.offsetTop-demo.scrollTop>=0)
demo.scrollTop+=demo2.offsetHeight
else{
demo.scrollTop--
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

作者：bjgeo 2008/6/23 11:38:20


非常感谢

分页:[1]