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

 

<!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. Bubble Cup 8 finals D. Tablecity (575D)

    题意: (无输入,纯输出题) 一个城市用1000列2行的格子表示,一个小偷藏在城市的某一处. 在每一小时的开始, 在(X, Y)位置的小偷可以移动到 (X - 1, Y), (X + 1, Y),(X ...

  2. http://875880923.iteye.com/blog/1963400

    已经接触了一段时间的ACM(详见百度百科)了,每回刷杭电oj的题累了的时候,就喜欢去看Ranklist里面的排名,看看前面的牛人的格言,让自己有一点憧憬.有一天突然好奇杭电上的人做的总题数的数量与人数 ...

  3. 如何配置IIS处理多并发请求及存在的问题

    很多时候多线程能快速高效独立的计算数据,应用比较多. 但今天遇到的多进程下的问题更是让人觉得复杂 多进程下static变量都要失效,就目前的平台和产品static使用是很多的,各种session.ca ...

  4. GET和POST有什么区别？及为什么网上的多数答案都是错的

    如果有人问你,GET和POST,有什么区别?你会如何回答? 最普遍的答案 回来之后寻思了很久,他到底是想问我什么?我一直就觉得GET和POST没有什么除了语义之外的区别,自打我开始学习Web编程开始就 ...

  5. jdbc 设置连接支持多条sql

    jdbc 参数加上 &allowMultiQueries=true 参考资料: 1.https://my.oschina.net/zhuguowei/blog/411853  Jdbc Url ...

  6. 【荐】如何规划 Nginx 网站目录的权限（用户，用户组，ssh，sftp）

    从上一篇文章:PHP网站(nginx.php-fpm.mysql) 用户权限解析,可以学习了解到,nginx 和 php-fpm 的用户是如何运作的. 有个工作场景: 1.公司的一台 CentOS 服 ...

  7. kali安装vmtools问题

    切记使用此法,一定要确保kali没有装过vmware workstation自带的vmware_tools,不然要卸载之后才能使用.我当初就是安装了后使用此法,不能成功,卸载也不行,导致完全重装 安装 ...

  8. bzoj4314

    首先,我们考虑原题取消k的限制后怎么做. 设(xy)是一个n次单位根,f(x)=(1+x^0)*(1+x^1)*(1+x^2)*...*(1+x^n-1) 参见 http://bx2k.is-prog ...

  9. 掌握 Linux PC 性能之基准测试

    导读 基准测试是一项测试或一系列测试,用来确定某个计算机硬件运行起来的状况有多好:在许多情况下,“基准测试”实际上等同于“压力测试”,通过测试硬件的极限,然后可以将测得的结果与其他硬件测得的结果作一番 ...

  10. Distinct Subsequences

    https://leetcode.com/problems/distinct-subsequences/ Given a string S and a string T, count the numb ...