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

 

<!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. 淘宝分布式文件存储系统：TFS

    TFS ——分布式文件存储系统 TFS(Taobao File System)是淘宝针对海量非结构化数据存储设计的分布式系统,构筑在普通的Linux机器集群上,可为外部提供高可靠和高并发的存储访问. ...

  2. PowerShell Notes

    1.  概要 - PowerShell 是cmdlet(command-let)的指令集合,类似unix的bash. - IDE: Windows PowerShell ISE,不区分大小写,可以用命 ...

  3. WdatePicker 使用

    限制范围为今年之后的3年 $("input[name='year']").attr("onClick","WdatePicker({dateFmt:' ...

  4. Python中函数、类、模块和包的调用

    初学python阶段,大多数人对函数.类.模块和包的调用都搞得不是很清楚,这篇随笔就简单的进行说明. (1)函数 当函数定义好之后,可以直接调用. 比如:def summ(add1,add2),那么 ...

  5. 在Parallel中使用DbSet.Add()发现的一系列多线程问题和解决过程

    发现问题 需求很简单,大致就是要批量往数据库写数据,于是打算用Parallel并行的方式写入,希望能利用计算机多核特性加快程序执行速度.想的很美好,于是快速撸了类似下面的一串代码: using (va ...

  6. 使用maven命令将jar包导入本地仓库

    mvn install:install-file-DgroupId=包名-DartifactId=项目名-Dversion=版本号-Dpackaging=jar-Dfile=jar文件所在路径 1,本 ...

  7. 耿丹CS16-2班第四次作业汇总

    Deadline: 2016-10-13 12:00 作业内容 实验3-1 分别使用while循环.do while循环.for循环求1+2+3+ --+100. 实验3-2 分别使用while循环. ...

  8. PYTHON map（）函数详解

    map()函数接收两个参数,一个是函数,一个是序列,map将传入的函数依次作用到序列的每个元素,并把结果作为新的list返回. 栗子如下↓ 图片来自于网上 def f(x,a): return x+x ...

  9. visual studio installer 打包123

    下载安装visual studio installer

  10. a标签填充父容器

    body>div>a{Join} div{ width:150px; height:35px; } a{ display:block; line-height:35px; height:3 ...