如何让图片无间断的连续循环滚动？[泥客论坛（十几年前的回忆）]

>> 网页设计交流，相互学习，共同进步……

搜一搜更多此类问题

泥客论坛（十几年前的回忆） → 泥客技术 → ☆网页制作☆ → 如何让图片无间断的连续循环滚动？

您是本帖的第 9016 个阅读者

树形打印

标题：

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

bjgeo

等级：小学一年级

文章：22

积分：575

楼主

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

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

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

2008/6/17 17:13:42

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10701

积分：67059

第 2 楼

页面最下面有演示

http://www.kesonic.com/nic/list/pic.htm

2008/6/17 22:54:55

bjgeo

等级：小学一年级

文章：22

积分：575

第 3 楼

想问一下，控制滚动方向的代码在哪？谢谢

2008/6/23 10:21:15

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10701

积分：67059

第 4 楼

图片向左滚动的代码

      <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:22:15

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10701

积分：67059

第 5 楼

图片向右滚动的代码

      <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:23:49

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10701

积分：67059

第 6 楼

图片向上滚动的代码

<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:28:16

小轲

头衔：泥客主席

等级：校长

威望：10

文章：10701

积分：67059

第 7 楼

图片向下滚动的代码

<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>

2008/6/23 11:29:25

bjgeo

等级：小学一年级

文章：22

积分：575

第 8 楼

非常感谢

2008/6/23 11:38:20

1/1页

发短信
购买论坛点券
我能做什么
我发表的主题
我参与的主题
基本资料修改
用户密码修改
联系资料修改
用户短信服务
编辑好友列表
用户收藏管理
个人文件管理
论坛通行证设置

今日贴数图例
主题数图例
总帖数图例
在线图例
在线情况
用户组在线图例

文件集浏览
图片集浏览
Flash浏览
音乐集浏览
电影集浏览
贺卡发送

页面执行时间 00.14063 秒, 4 次数据查询