原文请参考:http://www.cnblogs.com/xucanzhao/archive/2005/12/02/289194.html

 1                            <table cellspacing="0" style='border: 1px solid #9F9F9F;' width="100%">
 2                                <tr align="center">
 3                                    <td bgcolor="#CCCCCC">
 4                                        <div id="demo" style="overflow: hidden; height: 120px; width: 700px; margin-top: 12px; vertical-align: middle;">
 5                                            <table width="cellspacing=0">
 6                                                <tr>
 7                                                    <td id="demo1">
 8                                                        <table cellspacing="0">
 9                                                            <tr>
10                                                                <!--滚动图片 begin-->
11                                                            <td class=RollPic><a href=/z/chinaoverseas/photo/22566/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-12-02/U1489P6T12D1912318F44DT20051202002622_small_h.JPG border=1 alt='邵佳一慕尼黑1860随队训练'></a></td>
35              <td width=4><img width=4></td>
36<td class=RollPic><a href=/z/chinaoverseas/photo/22493/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/j/2005-11-30/U1489P6T12D1908322F44DT20051130010010_small_h.jpg border=1 alt='孙祥结束试训回国'></a></td>
37              <td width=4><img width=4></td>
38<td class=RollPic><a href=/z/chinaoverseas/photo/22432/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-29/U329P6T12D1907332F44DT20051129101956_small_h.jpg border=1 alt='邵佳一连续三场进球'></a></td>
39              <td width=4><img width=4></td>
40<td class=RollPic><a href=/z/chinaoverseas/photo/22414/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-28/U1022P6T12D1904876F44DT20051128072121_small_h.jpg border=1 alt='1860客场险胜邵佳一再进球'></a></td>
41              <td width=4><img width=4></td>
42<td class=RollPic><a href=/z/chinaoverseas/photo/22401/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-27/U1166P6T12D1903924F44DT20051127180803_small_h.jpg border=1 alt='曲圣卿助本队赢得榜首大战'></a></td>
43              <td width=4><img width=4></td>
44<td class=RollPic><a href=/z/chinaoverseas/photo/22299/index.shtml target="_blank"><img src=http://image2.sina.com.cn/ty/g/p/2005-11-25/U1022P6T12D1900128F44DT20051125110547_small_h.jpg border=1 alt='孙祥试训维冈表现不俗'></a></td>
45              <td width=4><img width=4></td>

12                                                                <!--滚动图片 end-->
13                                                            </tr>
14                                                        </table>
15                                                    </td>
16                                                    <td id="demo2">
17                                                    </td>
18                                                </tr>
19                                            </table>
20                                        </div>
21                                    </td>
22                                </tr>
23                            </table>
24

<script>
71      var speed=10//速度数值越大速度越慢
72      demo2.innerHTML=demo1.innerHTML
73      function Marquee(){
74          if(demo2.offsetWidth-demo.scrollLeft<=0)
75          demo.scrollLeft-=demo1.offsetWidth
76          else{
77            demo.scrollLeft++
78          }
79      }
80      var MyMar=setInterval(Marquee,speed)
81      demo.onmouseover=function() {clearInterval(MyMar)}
82      demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
83      </script>

转载于:https://www.cnblogs.com/lyzxx/archive/2007/03/14/673999.html

【转】javascript实现图片的连续滚动相关推荐

  1. html的动画效果实现无限轮播,jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 1. id为container的div是最外层的包装,用来控制滚动 ...

  2. dw自动滚动图片_Dreamweaver连续滚动图片的制作

    该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 横向不间断连续滚动图片,将下面代码放到你要显示的位置 //more javascript from http://www.smallrain.net do ...

  3. JavaScript之图片的无缝滚动

    图片无缝滚动就是图片一直不停的滚动,好像没有无穷无尽似的,实际上就是几张图片不停的循环,但是看不出有从最后面切换到最前面的效果,这就是无缝滚动,文字和图片都可以无缝滚动,这里介绍的是图片,文字是同样的 ...

  4. html不间断滚动图片,Javascript实现图片不间断滚动的代码

    滚动测试 /** * @para obj 目标对象 如:demo,deml1,demo2 中的"demo" 可任意,只要不重复 * * @para speed 滚动速度 越大越慢 ...

  5. 通过JavaScript实现图片的连续播放(轮播图)

    准备:该目录下存放的文件如下图所示: 目录中存放了四张图(用于图片的轮播)和两个html文件(即下面的两个实例). 以下是正文: 实例一:通过两个按钮last.next控制显示上一张图片和下一张图片. ...

  6. 网页特效--图片连续滚动(上下左右)

    图片连续滚动的解决方法先来认识一下几个参数: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于 ...

  7. 怎么弄自动滚动的图片 html,HTML网页上连续滚动图片的制作

    制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...

  8. HTML网页设计图片滚动,HTML网页上连续滚动图片的制作

    制作方法:相关文件:在页面 ~相关位置加入代码: 新建scrollimg-pic.htm页面,插入相同大小的图片若干张.为使它不停顿地连续播放,请在同一行中,连续插入图片二至三次.类似于文件.在每一张 ...

  9. html5多张图片滚动播放,javascript+html5实现仿flash滚动播放图片的方法_javascript技巧...

    本文实例讲述了javascript+html5实现仿flash滚动播放图片的方法.分享给大家供大家参考.具体如下: html部分: css部分: body{ margin: 0px; padding: ...

  10. html 多张图片自动滚动,JS实现图片的不间断连续滚动的简单实例

    js替代marquee实现图片无缝滚动 可能大家都碰到过,当marquee中滚动的是图片的时候,滚到终点的时候直接就跳回到起点了,而不像文字那样可以无缝滚动,下面介绍的是通过js来实现图片的无缝滚动. ...

最新文章

  1. 旷视张祥雨:神经网络架构设计新思路
  2. 2021年春季学期-信号与系统-第三次作业参考答案-第五道题
  3. tomcat启动命令行窗口出现乱码的解决方法
  4. cors漏洞 复现_Jsonp跨域漏洞浅析
  5. eclipse如何快速查找某个类
  6. 关于SAP Spartacus ManageUnitsListComponent的一些试错
  7. java端到端_Java应用程序性能监控:复杂分布式应用程序的端到端性能
  8. web安全检查_如何利用现代Web检查器的功能
  9. Linux进程间通信(匿名管道)
  10. 自学python到什么程度可以找工作-Python学到什么程度就可以找工作?
  11. 如何一步一步成为一个领域专家
  12. 玩吧!北京!招人!Java!
  13. 如何使用谷歌浏览器把网页保存为PNG图片
  14. Android导航栏自动隐藏,Android隐藏和显示虚拟导航栏
  15. 数据分析三剑客之特征值提取(七)
  16. 针对德尔塔等变异株!国产皮卡新冠疫苗开启临床实验;重庆成都互为人才外流第一目标城市 | 美通社头条...
  17. yolov5的anchors及bbox的编解码原理
  18. 亚马逊Amazon-API接口使用说明
  19. opencv:centos7中安装opencv4.3.0环境
  20. 【读书笔记】浪潮之巅~与时代同行

热门文章

  1. XXX packages are looking for funding run `npm fund` for details解决方法
  2. 学习Activiti工作流框架之入门篇
  3. 还在为英语学习发愁吗?身为程序员的你可能需要这样一份“宝典”(上)
  4. 51采集温度电压电流+LCD1602显示
  5. 【强化学习】DQN:Flappy Bird实例分析
  6. Windows平台下Fits格式文件读写C++库CCfits编译过程
  7. 原来这个世界还有这么纯洁的爱情!
  8. python 计算gdp_使用Numpy计算Python-Gini系数
  9. 论我是如何被自己搭建的聊天机器人气死的(自己的搞笑经历)
  10. 360周鸿祎:互联网好产品六字法则——刚需、痛点、高频