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

 

<!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. redis技巧--IP地址查询对应城市

    场景: 根据IP地址判断用户所在地,虽然网上有好多篇了,但我记录一个一看就懂的,不用看超长文字再自己理解了. 我们有城市和IP地址段的对应关系,如: 上海: 202.127.0.0 ~ 202.127 ...

  2. js中数组去除重复项目

    js语法技巧:if(a>=5)  alert();  可以改写成下边语句:  a>=5&&alert(); 在下文中会用到这种写法 // for循环删除后面重复的 速度最快 ...

  3. IO例子

    1.用字节读取一个文件,替换换行符,并打印 String fileName = "src/learnIO/Stream.java"; FileInputStream in = ne ...

  4. FA模块的10个API范例

    CREATE OR REPLACE PACKAGE BODY cux_fa_do_pkg IS --一.资产新增  PROCEDURE do_addition IS      l_trans_rec  ...

  5. javascript星级评分（多个）

    JS打多个类型星级评分: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: ...

  6. N皇后问题—初级回溯

    N皇后问题,最基础的回溯问题之一,题意简单N*N的正方形格子上放置N个皇后,任意两个皇后不能出现在同一条直线或者斜线上,求不同N对应的解. 提要:N>13时,数量庞大,初级回溯只能保证在N< ...

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

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

  8. python re模块search()与match()区别

    re.search()搜索字符串并返回结果. 整个字符串搜索. re.match()匹配字符串并返回结果 从开始处匹配. 所以,match()可以理解为search()的一个子集.

  9. DLL 生成与使用的全过程(2010-01-18 14:50:17)

    转载自 水滴的博客http://blog.sina.com.cn/spiritofwater   个人学习用 转载▼   分类: 技术 由dll导出的lib文件: 包含了每一个dll导出函数的符号名和 ...

  10. yii2——自定义widget

    参考资料:http://www.bsourcecode.com/yiiframework2/how-to-create-custom-widget-in-yii2-0-framework/   如何使 ...