设为首页收藏本站

就爱编程论坛

 找回密码
 注册

人人连接登陆

无需注册,直接登录

用新浪微博连接

一步搞定

QQ登录

只需一步,快速开始

查看: 404|回复: 5
打印 上一主题 下一主题

js图片无缝滚动代码 [复制链接]

Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    我玩的应用:

    跳转到指定楼层
    楼主
    发表于 2011-8-13 01:32:14 |只看该作者 |倒序浏览
    想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,所以分不出跳动的瞬间,从而达到“无缝”滚动的目的。 在原作者的基础上做了一定修改,主要还是在样式上面,将表格更换为标签。并且将JavaScript标准化,可以在所有浏览器运行。 先了解一下对象的几个的属性: innerHTML:设置或获取位于对象起始和结束标签内的 HTML scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度 offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置 offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置 offsetWidth:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的宽度 图片上无缝滚动
    >> CODE <style type="text/css">
        <!--
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         height: 100px;
         text-align: center;
         float: left;
        }
        #demo img {
         border: 3px solid #F2F2F2;
         display: block;
        }
        -->
        </style>
        向上滚动
        <div id="demo">
        <div id="demo1">
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        </div>
        <div id="demo2"></div>
        </div>
        <script>
        <!--
        var speed=10; //数字越大速度越慢
        var tab=document.getElementById("demo");
        var tab1=document.getElementById("demo1");
        var tab2=document.getElementById("demo2");
        tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
        function Marquee(){
        if(tab2.offsetTop-tab.scrollTop<=0){//当滚动至demo1与demo2交界时
        tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
        }else{
        tab.scrollTop++
        }
        }
        var MyMar=setInterval(Marquee,speed);
        tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
        -->
        </script>

        图片下无缝滚动

         程序代码
        <style type="text/css">
        <!--
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         height: 100px;
         text-align: center;
         float: left;
        }
        #demo img {
         border: 3px solid #F2F2F2;
         display: block;
        }
        -->
        </style>
        向下滚动
        <div id="demo">
        <div id="demo1">
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        </div>
        <div id="demo2"></div>
        </div>
        <script>
        <!--
        var speed=10; //数字越大速度越慢
        var tab=document.getElementById("demo");
        var tab1=document.getElementById("demo1");
        var tab2=document.getElementById("demo2");
        tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
        tab.scrollTop=tab.scrollHeight
        function Marquee(){
        if(tab1.offsetTop-tab.scrollTop>=0){//当滚动至demo1与demo2交界时
        tab.scrollTop+=tab2.offsetHeight //demo跳到最顶端
        }else{
        tab.scrollTop--
        }
        }
        var MyMar=setInterval(Marquee,speed);
        tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
        -->
        </script>

        图片左无缝滚动

         程序代码
        <style type="text/css">
        <!--
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         width: 500px;
        }
        #demo img {
         border: 3px solid #F2F2F2;
        }
        #indemo {
         float: left;
         width: 800%;
        }
        #demo1 {
         float: left;
        }
        #demo2 {
         float: left;
        }
        -->
        </style>
        向左滚动
        <div id="demo">
        <div id="indemo">
        <div id="demo1">
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        </div>
        <div id="demo2"></div>
        </div>
        </div>
        <script>
        <!--
        var speed=10; //数字越大速度越慢
        var tab=document.getElementById("demo");
        var tab1=document.getElementById("demo1");
        var tab2=document.getElementById("demo2");
        tab2.innerHTML=tab1.innerHTML;
        function Marquee(){
        if(tab2.offsetWidth-tab.scrollLeft<=0){
        tab.scrollLeft-=tab1.offsetWidth
        }else{
        tab.scrollLeft++;
        }
        }
        var MyMar=setInterval(Marquee,speed);
        tab.onmouseover=function() {clearInterval(MyMar)};
        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
        -->
        </script>

        图片右无缝滚动

         程序代码
        <style type="text/css">
        <!--
        #demo {
         background: #FFF;
         overflow:hidden;
         border: 1px dashed #CCC;
         width: 500px;
        }
        #demo img {
         border: 3px solid #F2F2F2;
        }
        #indemo {
         float: left;
         width: 800%;
        }
        #demo1 {
         float: left;
        }
        #demo2 {
         float: left;
        }
        -->
        </style>
        向右滚动
        <div id="demo">
        <div id="indemo">
        <div id="demo1">
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        <a href="#"><img src="http://www.cnrui.cn/other/link/Clear_logo.gif" border="0" /></a>
        </div>
        <div id="demo2"></div>
        </div>
        </div>
        <script>
        <!--
        var speed=10; //数字越大速度越慢
        var tab=document.getElementById("demo");
        var tab1=document.getElementById("demo1");
        var tab2=document.getElementById("demo2");
        tab2.innerHTML=tab1.innerHTML;
        function Marquee(){
        if(tab.scrollLeft<=0){
        tab.scrollLeft+=tab2.offsetWidth
        }else{
        tab.scrollLeft--
        }
        }
        var MyMar=setInterval(Marquee,speed);
        tab.onmouseover=function() {clearInterval(MyMar)};
        tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
        -->
        </script>
    分享到: QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
    分享分享0 收藏收藏0 支持支持0 反对反对0 分享到人人 转发到微博
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    沙发
    发表于 2011-8-13 01:34:11 |只看该作者
    几种测试:
    非table布局
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. <title>无标题文档</title>
    6. </head>
    7. <style>
    8. body,img,ul{margin:0px;padding:0px;border:none;}
    9. ul{list-style:none}
    10. #objdiv,#objdiv1{width:800px;height:240px;margin:0 auto;overflow:hidden;}
    11. #indiv{width:800%;float:left}
    12. #objdiv{border:1px red solid;}
    13. #objdiv1,#objdiv2{margin:0px;float:left;}
    14. #objdiv2{height:240px;overflow:hidden;}
    15. .exmple{width:200px;height:240px;line-height:240px; float:left;}
    16. </style>
    17. <body>
    18. <div id="objdiv">
    19. <div id="indiv">
    20. <div id="objdiv1">
    21. <ul>
    22. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    23. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    24. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    25. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    26. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    27. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    28. <li class="exmple"><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a><li>
    29. </ul>
    30. </div>
    31. <div id="objdiv2">
    32. </div>
    33. </div>
    34. </div>
    35. <script type="text/javascript">
    36. var o1=document.getElementById("objdiv");
    37. var o2=document.getElementById("objdiv1");
    38. var o3=document.getElementById("objdiv2");
    39. o3.innerHTML=o2.innerHTML;
    40. var timer;
    41. function moves(){
    42. if(o3.offsetWidth-o1.scrollLeft<=0){
    43. o1.scrollLeft-=o3.offsetWidth;
    44. }else{
    45. o1.scrollLeft++;
    46. }
    47. timer=setTimeout("moves()",10);
    48. }
    49. moves();
    50. o1.onmouseover=function(){clearTimeout(timer);}
    51. o1.onmouseout=function(){moves();}
    52. </script>
    53. </body>
    54. </html>
    复制代码

    Table布局:
    复制代码

    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    板凳
    发表于 2011-8-13 01:34:36 |只看该作者
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. <head>
    4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    5. <title>无标题文档</title>
    6. </head>
    7. <style>
    8. body,img,ul{margin:0px;padding:0px;border:none;}
    9. #objdiv,#objdiv1{width:700px;height:240px;overflow:hidden}
    10. #objdiv2{width:1px;}
    11. </style>
    12. <body>
    13. <div id="objdiv">
    14. <table align="center" cellpadding="0" cellspacing="0" border="0">
    15. <tr><td id="objdiv1">
    16. <table align="center" cellpadding="0" cellspacing="0" border="0">
    17. <tr>
    18. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    19. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    20. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    21. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    22. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    23. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    24. <td><a href="javascript:void(0)"><img src="pic.gif" alt="IMAGE"/></a></td>
    25. </tr>
    26. </table>
    27. </td><td id="objdiv2"></td></tr>
    28. </table>
    29. </div>
    30. <script type="text/javascript">
    31. var o1=document.getElementById("objdiv");
    32. var o2=document.getElementById("objdiv1");
    33. var o3=document.getElementById("objdiv2");
    34. o3.innerHTML=o2.innerHTML;
    35. var timer;
    36. function moves(){
    37. if(o3.offsetWidth<=o1.scrollLeft){
    38. o1.scrollLeft=o1.scrollLeft-o3.offsetWidth;
    39. }else{
    40. o1.scrollLeft++;
    41. }
    42. timer=setTimeout("moves()",1);
    43. }
    44. moves();
    45. o1.onmouseover=function(){clearTimeout(timer);}
    46. o1.onmouseout=function(){moves();}
    47. </script>
    48. </body>
    49. </html>
    复制代码

    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 9Rank: 9Rank: 9

  • TA的每日心情
    无聊
    2025-5-27 03:37:20
  • 签到天数: 366 天

    [LV.9]以坛为家II

    论坛先锋 学习至圣 荣誉成员 论坛元老 活跃之星 终极领袖

    地板
    发表于 2011-8-13 01:45:19 |只看该作者
    1. <style type="text/css"><!--
    2. ul, li, img, td {
    3. margin:0;
    4. padding:0;
    5. font-size:12px;
    6. list-style-type:none;
    7. text-align:center;
    8. }
    9. .demo {
    10. width:230px;
    11. margin-bottom: 8px;
    12. height: 172px;
    13. overflow: hidden;
    14. }
    15. .demo ul {
    16. width:408px;
    17. clear:both;
    18. }/*102*4=408px等于实际内容的总宽度*/
    19. .demo li {
    20. width:102px;
    21. float:left;
    22. text-align:center;
    23. }
    24. .demo img {
    25. margin-bottom:8px;
    26. }
    27. --></style>
    28. <div class="demo" id="demo1">
    29. <table cellpadding="0" cellspacing="0">
    30. <tbody>
    31. <tr>
    32. <td>
    33. <ul>
    34. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图1</li>
    35. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图2</li>
    36. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图3</li>
    37. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图4</li>
    38. </ul>

    39. </td>
    40. </tr>
    41. </tbody>
    42. </table>
    43. </div>
    44. <div class="demo" id="demo2">
    45. <table cellpadding="0" cellspacing="0">
    46. <tbody>
    47. <tr>
    48. <td>
    49. <ul>
    50. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图1</li>
    51. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图2</li>
    52. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图3</li>

    53. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图4</li>
    54. </ul>
    55. </td>
    56. </tr>
    57. </tbody>
    58. </table>
    59. </div>
    60. <script type="text/javascript" language="JavaScript">// <![CDATA[
    61. function startmarquee(lh,speed,delay,index){
    62. var o=document.getElementById("demo"+index);
    63. var o_td=o.getElementsByTagName("td")[0];
    64. var str=o_td.innerHTML;
    65. var newtd=document.createElement("td");
    66. newtd.innerHTML=str;
    67. o_td.parentNode.appendChild(newtd);
    68. var t;
    69. var p=false;
    70. o.onmouseover=function(){p=true;}
    71. o.onmouseout=function() {p=false;}
    72. function start(){
    73. t=setInterval(Marquee,speed);
    74. if(!p){o.scrollLeft += 3;}
    75. }
    76. function Marquee(){
    77. if(o_td.offsetWidth-o.scrollLeft<=0){
    78. o.scrollLeft-=o_td.offsetWidth;
    79. }else{
    80. if(o.scrollLeft%lh!=0){
    81. o.scrollLeft+= 3
    82. }else{clearInterval(t); setTimeout(start,delay);}
    83. }
    84. }
    85. setTimeout(start,delay);
    86. }
    87. startmarquee(102,1,1500,1);
    88. startmarquee(102,30,1,2);
    89. // ]]></script>
    复制代码
    [img=http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=fRUcHhYWGAQ9GxIFEBwUEVMeEhA]http://rescdn.qqmail.com/zh_CN/htmledition/images/function/qm_open/ico_mailme_02.png[/img]

    使用道具 举报

    Rank: 2

    升级 
     
    0%

    该用户从未签到

    5#
    发表于 2011-9-8 19:40:24 |只看该作者

    使用道具 举报

    Rank: 3Rank: 3

    升级 
     
    52.33%

    该用户从未签到

    6#
    发表于 2011-9-18 21:33:52 |只看该作者

    使用道具 举报

    您需要登录后才可以回帖 登录 | 注册 人人连接登陆

    晴云孤魂's Blog|就爱编程搜帖|手机版|Archiver|就爱编程论坛     

    GMT+8, 2025-7-2 14:02 , Processed in 0.401362 second(s), 36 queries .

    Powered by Discuz! X2

    © 2001-2011 Comsenz Inc.

    回顶部