就爱编程论坛

标题: js图片无缝滚动代码 [打印本页]
作者: admin    时间: 2011-8-13 01:32:14     标题: js图片无缝滚动代码

想必大家都注意到<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>
作者: admin    时间: 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布局：
复制代码

作者: admin    时间: 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>
复制代码

作者: admin    时间: 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>

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

  55. <li><img src="http://www.jb51.net/img.jpg" /><br>滚动图4</li>
  56. </ul>
  57. </td>
  58. </tr>
  59. </tbody>
  60. </table>
  61. </div>
  62. <script type="text/javascript" language="JavaScript">// <![CDATA[
  63. function startmarquee(lh,speed,delay,index){
  64. var o=document.getElementById("demo"+index);
  65. var o_td=o.getElementsByTagName("td")[0];
  66. var str=o_td.innerHTML;
  67. var newtd=document.createElement("td");
  68. newtd.innerHTML=str;
  69. o_td.parentNode.appendChild(newtd);
  70. var t;
  71. var p=false;
  72. o.onmouseover=function(){p=true;}
  73. o.onmouseout=function() {p=false;}
  74. function start(){
  75. t=setInterval(Marquee,speed);
  76. if(!p){o.scrollLeft += 3;}
  77. }
  78. function Marquee(){
  79. if(o_td.offsetWidth-o.scrollLeft<=0){
  80. o.scrollLeft-=o_td.offsetWidth;
  81. }else{
  82. if(o.scrollLeft%lh!=0){
  83. o.scrollLeft+= 3
  84. }else{clearInterval(t); setTimeout(start,delay);}
  85. }
  86. }
  87. setTimeout(start,delay);
  88. }
  89. startmarquee(102,1,1500,1);
  90. startmarquee(102,30,1,2);
  91. // ]]></script>
复制代码
作者: 广都豪    时间: 2011-9-8 19:40:24

楼主很棒！












www.byelu.com  办大专毕业证 买文凭
作者: 侃呀侃之灵    时间: 2011-9-18 21:33:52

真正围观中...-_-












传奇sf 1.85狂雷版本 1.95皓月无内功 http://516x.com www.td75.com



欢迎光临 就爱编程论坛 (http://bbs.waibc.com/) Powered by Discuz! X2