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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
      <td id="demo2" valign="top"></td>
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollLeft()>=demo1.width())
        demo.scrollLeft(0); 
    else{
        demo.scrollLeft(demo.scrollLeft()+1);
    }

var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} ) function fun1(){
    alert(demo.scrollLeft());
}
function fun2(){
    alert(demo1.width());
}
</script>
<input type="button"  value="显示demo.scrollLeft()" onclick="fun1();"/>
<input type="button"  value="显示demo1.width())" onclick="fun2();"/>
</body>
</html>
 

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

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

 

function Marquee(){ 
    if(demo.scrollLeft()==0){
        demo.scrollLeft(demo1.width());
    }else{
        demo.scrollLeft(demo.scrollLeft()-1);
    }
}  

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

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS图片向上滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr id="demo1">
      <td valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总高度必须大于上面定义的demo的宽度,如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr id="demo2">
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollTop()>=demo1.height())
        demo.scrollTop(0); 
    else{
        demo.scrollTop(demo.scrollTop()+1);
    }

var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} ) function fun1(){
    alert(demo.scrollTop());
}
function fun2(){
    alert(demo1.height());
}
</script>
<input type="button"  value="显示demo.scrollTop()" onclick="fun1();"/>
<input type="button"  value="显示demo1.height())" onclick="fun2();"/>
</body>
</html>  

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

 

function Marquee(){ 
    if(demo.scrollTop()==0)
        demo.scrollTop(demo1.height()); 
    else{
        demo.scrollTop(demo.scrollTop()-1);
    }
}

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. [LeetCode] 3Sum Closest 最近三数之和

    Given an array S of n integers, find three integers in S such that the sum is closest to a given num ...

  2. jquery 进阶

    1.0 jquery的ajax同步和异步区别 2.0 cdnjquery加载失败加载本地 <script type="text/javascript" src="/ ...

  3. 微信JS-SDK

    <div class="lbox_close wxapi_form"> <h3 id="menu-basic">基础接口</h3& ...

  4. JAVA定时器实现之一(通过继承TimerTask)

    在某些时候, 我们需要实现这样的功能,某一程序隔一段时间执行一次,而这一事情由系统本身来完成,并不是人为的触发,我们一般可称此为定时器任务. 这类技术主要应用到那些需要进行后台整理数据的系统中,比如说 ...

  5. StrPCopy与StrPas功能正好相反,作用是与C语言字符串和Delphi的String相互转化

    StrPCopy = Copies an AnsiString (long string) to a null-terminated string.function StrPCopy(Dest: PA ...

  6. [LeetCode][Python]Tow Sum

    # -*- coding: utf8 -*-'''https://oj.leetcode.com/problems/two-sum/ Given an array of integers, find ...

  7. JVM性能调优,GC

    刚刚做完了一个项目的性能测试,“有幸”也遇到了内存泄露的案例,所以在此和大家分享一下. 主要从以下几部分来说明,关于内存和内存泄露.溢出的概念,区分内存泄露和内存溢出:内存的区域划分,了解GC回收机制 ...

  8. mariadb 10.1.26 二进制包安装笔记

    报错链接:http://php.upupw.net/ank2discuss/40/6841-e.html mariadb 10.1.26 二进制版本 全名称: mariadb-10.1.26-linu ...

  9. Mysql数据库常用分库和分表方式

    http://blog.csdn.net/clevercode/article/details/50877580 1 分库 1.1 按照功能分库 按照功能进行分库.常见的分成6大库:    1 用户类 ...

  10. (转)SQL Server内存遭遇操作系统进程压榨案例

    原文地址:http://www.cnblogs.com/zc_0101/p/3592259.html 场景: 最近一台DB服务器偶尔出现CPU报警,我的邮件报警阈(请读yù)值设置的是15%,开始时没 ...