图片无缝向左滚动的代码如下：

  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <title>JS图片向左滚动</title>
  7.     <style type="text/css">
  8.     img{
  9.     border: none;
  10.     }
  11.     </style>
  12.     <!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
  13.     <script type="text/javascript" src="jquery.js"></script>
  14. </head>
  15. <body>
  16. <div id="demo" style="overflow:hidden;width:500px;">
  17.   <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
  18.     <tr>
  19.       <td id="demo1" valign="top" bgcolor="ffffff">
  20.       <!-- 特别注意，下面的图片总宽度必须大于上面定义的demo的宽度，如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题！ -->
  21.           <table border="0" cellspacing="0" cellpadding="0">
  22.           <tr align="center">
  23.             <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
  24.             <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
  25.             <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
  26.             <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
  27.             <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
  28.           </tr>
  29.         </table>
  30.       </td>
  31.       <td id="demo2" valign="top"></td>
  32.     </tr>
  33.   </table>
  34. </div>
  35. <script type="text/javascript"> 
  36. var speed=30;
  37. var demo = $("#demo");
  38. var demo1 = $("#demo1");
  39. var demo2 = $("#demo2");
  40. demo2.html(demo1.html());
  41. function Marquee(){ 
  42.     if(demo.scrollLeft()>=demo1.width())
  43.         demo.scrollLeft(0); 
  44.     else{
  45.         demo.scrollLeft(demo.scrollLeft()+1);
  46.     }
  47. } 
  48. var MyMar=setInterval(Marquee,speed) 
  49. demo.mouseover(function() {
  50.     clearInterval(MyMar);
  51. } )
  52. demo.mouseout(function() {
  53.     MyMar=setInterval(Marquee,speed);
  54. } )
  55.  
  56. function fun1(){
  57.     alert(demo.scrollLeft());
  58. }
  59. function fun2(){
  60.     alert(demo1.width());
  61. }
  62. </script>
  63. <input type="button"  value="显示demo.scrollLeft()" onclick="fun1();"/>
  64. <input type="button"  value="显示demo1.width())" onclick="fun2();"/>
  65. </body>
  66. </html>
  67.  

那二个按钮主要是为了自己观察值的变化之用，正式使用中可以去掉。

向右无缝滚动的HTML同上，只是js脚本中的Marquee函数不同，代码如下：

  1.  
  2.  
  3. function Marquee(){ 
  4.     if(demo.scrollLeft()==0){
  5.         demo.scrollLeft(demo1.width());
  6.     }else{
  7.         demo.scrollLeft(demo.scrollLeft()-1);
  8.     }
  9. }
  10.  
  11.  

向上无缝滚动的HTML代码如下：

  1.  
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7.     <title>JS图片向上滚动</title>
  8.     <style type="text/css">
  9.     img{
  10.     border: none;
  11.     }
  12.     </style>
  13.     <!-- 这句话不能少，记得把jquery.js文件放在当前页面的同一目录中 -->
  14.     <script type="text/javascript" src="jquery.js"></script>
  15. </head>
  16. <body>
  17. <div id="demo" style="overflow:hidden;height:300px;">
  18.   <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
  19.     <tr id="demo1">
  20.       <td valign="top" bgcolor="ffffff">
  21.       <!-- 特别注意，下面的图片总高度必须大于上面定义的demo的宽度，如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题！ -->
  22.           <table border="0" cellspacing="0" cellpadding="0">
  23.           <tr align="center">
  24.             <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
  25.           </tr>
  26.           <tr align="center">
  27.               <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
  28.           </tr>
  29.           <tr align="center">
  30.               <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
  31.           </tr>
  32.           <tr align="center">
  33.               <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
  34.           </tr>
  35.           <tr align="center">
  36.               <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
  37.           </tr>
  38.         </table>
  39.       </td>
  40.     </tr>
  41.     <tr id="demo2">
  42.     </tr>
  43.   </table>
  44. </div>
  45. <script type="text/javascript"> 
  46. var speed=30;
  47. var demo = $("#demo");
  48. var demo1 = $("#demo1");
  49. var demo2 = $("#demo2");
  50. demo2.html(demo1.html());
  51. function Marquee(){ 
  52.     if(demo.scrollTop()>=demo1.height())
  53.         demo.scrollTop(0); 
  54.     else{
  55.         demo.scrollTop(demo.scrollTop()+1);
  56.     }
  57. } 
  58. var MyMar=setInterval(Marquee,speed) 
  59. demo.mouseover(function() {
  60.     clearInterval(MyMar);
  61. } )
  62. demo.mouseout(function() {
  63.     MyMar=setInterval(Marquee,speed);
  64. } )
  65.  
  66. function fun1(){
  67.     alert(demo.scrollTop());
  68. }
  69. function fun2(){
  70.     alert(demo1.height());
  71. }
  72. </script>
  73. <input type="button"  value="显示demo.scrollTop()" onclick="fun1();"/>
  74. <input type="button"  value="显示demo1.height())" onclick="fun2();"/>
  75. </body>
  76. </html>
  77.  
  78.  

向下无缝滚动的HTML代码同上，只是js脚本中的Marquee函数不同，如下：

  1.  
  2.  
  3. function Marquee(){ 
  4.     if(demo.scrollTop()==0)
  5.         demo.scrollTop(demo1.height()); 
  6.     else{
  7.         demo.scrollTop(demo.scrollTop()-1);
  8.     }
  9. }

JQuery的无缝滚动的更多相关文章

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 一款经典的jQuery kxbdMarquee 无缝滚动插件

    <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 JavaScript 来模拟该效果的插件. 版本: jQuery v1.3.2+ 在线实例 ...

  5. 基于JQuery打造无缝滚动新闻

    JQuery实现 新闻无缝滚动 一.使用"首尾追加"实现无缝滚动 <head lang="en"> <meta charset="U ...

  6. 轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

    项目源代码下载地址:轮播图 以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换 ...

  7. jQuery kxbdMarquee 无缝滚动

    转:http://code.ciaoca.com/jquery/kxbdmarquee/ <marquee> 曾是 IE 下独有的一个走马灯效果的标签,其他浏览器并不兼容,于是出现了使用 ...

  8. jquery实现无缝滚动

    //点击上一页 $('.pointLeft').click(function() { if (prevAllow) { prevAllow = false; scrollUlLeft = scroll ...

  9. liMarquee – jQuery无缝滚动插件（制作跑马灯效果）

    liMarquee 是一款基于 jQuery 的无缝滚动插件,类似于 HTML 的 marquee 标签,但比 marquee 更强大.它可以应用于任何 Web 元素,包括文字.图像.表格.表单等元素 ...

随机推荐

  1. Django基础，Day2 - 编写urls,views,models

    编写views views:作为MVC中的C,接收用户的输入,调用数据库Model层和业务逻辑Model层,处理后将处理结果渲染到V层中去. polls/views.py: from django.h ...

  2. getchar fflush 的分析笔记

    问题描述: 统计从键盘输入的若干个字符中有效字符的个数,以换行符作为输入结束.有效字符是指第一个空格符前面的字符,若输入字符中没有空格符,则有效字符为除了换行符之外的所有字符. 示例代码: #incl ...

  3. oracle锁等级以及解锁

    以下是两遍关于锁的介绍的文章,第一篇介绍锁等级以及常用操作,第二篇主要介绍了oracle中两个用以查询数据库任意对象的两个视图 一: http://www.cnblogs.com/lguyss/arc ...

  4. 如何在Webstorm/Phpstorm中设置连接FTP，并快速进行文件比较，上传下载，同步等操作

    Phpstorm除了能直接打开localhost文件之外,还可以连接FTP,除了完成正常的数据传递任务之外,还可以进行本地文件与服务端文件的异同比较,同一文件自动匹配目录上传,下载,这些功能是平常ID ...

  5. CSS布局奇淫技巧之--各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  6. 写一个适应所有环境的js模块

    说下背景: 在ES6以前,JS语言没有模块化,如何让JS不止运行在浏览器,且能更有效的管理代码, 于是应运而生CommonJS这种规范,定义了三个全局变量: require,exports,modul ...

  7. spring 静态注入

    1.静态注入 在setter 方法修改为非 static , 然后在上面注入即可 @Component public class WeixinConfig { // token public stat ...

  8. [转载]jquery版小型婚礼（可动态添加祝福语）

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  9. Qt - 错误总结 - QObject::connect: Cannot queue arguments of type 'PVCI_CAN_OBJ' (Make sure 'PVCI_CAN_OBJ' is registered using qRegisterMetaType().)

    背景:一个线程通过signal-slot发送PVCI_CAN_OBJ类型的值到主线程中, 错误提示: QObject::connect: Cannot queue arguments of type ...

  10. canvas画圆（一）

    仿第一次效果