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

 

<!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. hub，桥，交换机，路由器的区别

    1.四种设备在网络中的物理位置 如下图 2.这四种设备的本质 这四种设备,不管怎样,他们都是进行包的转发,只不过转发的行为有些不一样而已 3.逐一介绍 对于hub,一个包过来后,直接将包转发到其他口. ...

  2. 比特币_Bitcoin 简介

    2008-11   Satoshi Nakamoto  Bitcoin: A Peer-to-Peer Electronic Cash System http://p2pbucks.com/?p=99 ...

  3. [HttpPost]和[AcceptVerbs(HttpVerbs.Post)]区别

    1.共同点:[HttpPost]和[AcceptVerbs(HttpVerbs.Post)]都是只接受POST请求过来的数据. 2.不同点:在MVC中如果想一个action既可以回应POST请求也可以 ...

  4. bat脚本参数 if goto choice for使用的学习笔记。

    写过几次bat脚本,但一直没有总结,最近找到一个网页介绍bat,总结得很好,转自 http://www.jb51.net/article/49627.htm: 本文只总结我不会的,全面的看原网页就可以 ...

  5. Linux文件类型

    1.windows系统和Linux系统的区别 windows通过问价扩展名来区分文件类型,例如*.txt是一个文本文件, linux系统文件的扩展名和文件类型没有关系 为了容易区分文件类型,linux ...

  6. eclipse安装spring的插件

    第一步:插件下载 http://spring.io/tools/sts/all 安装包链接 第二步:插件安装 第三步:安装成功检测

  7. Bootstrap table使用心得

    序号显示带分页信息的连续编号,在序号列添加以下格式化代码即可. { field: 'number', title: '序号', align:'center', width:45, formatter: ...

  8. 3d转换-正方体-Html5Css3-遁地龙卷风

    (-1) 写在前面 我用的是chrome49,这个案例是从网上看到的,向这位同行致敬,建议大家在记录自己学习感悟时,向我一样加上笔名,被转载的时候还能留下点东西. 在研究slice-box.js的时候 ...

  9. Makefile文件学习总结

    Makefile文件相当于是一种脚本编程语言,目的是实现自动化编译.编写makefile文件的过程中可以使用变量.控制结构和函数等一般编程语言的特性. Makefile文件的组成内容.makefile ...

  10. C语言 完美字符串

    约翰认为字符串的完美度等于它里面所有字母的完美度之和.每个字母的完美度可以由你来分配,不同字母的完美度不同,分别对应一个1-26之间的整数. 约翰不在乎字母大小写.(也就是说字母F和f)的完美度相同. ...