<script type="text/javascript" src="_pub/Script/jquery.js"></script>

<script type="text/javascript">

$(function () {
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 speed = 20;
var myMar = setInterval(Marquee, speed);

demo.mouseover(function () {
clearInterval(myMar);
});

demo.mouseout(function () {
myMar = setInterval(Marquee, speed);
});

})

</script>

<div id="demo" style="overflow:hidden;width:1280px;" >

<table style="border:1px;flex-align:center;" cellpadding="1" cellspacing="1">
<tr>
<td id="demo1" valign="top" bgcolor="ffffff">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><img src="skin/images2/1.png" width="265" height="163" alt="图"/></td>   这几张图的总宽度大于1280px;才能在循环2次之后继续滚动
<td><img src="skin/images2/2.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/3.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/4.png" width="265" height="163" alt="图"/></td>
<td><img src="skin/images2/5.png" width="265" height="163" alt="图"/></td>

</tr>
</table>
</td>
<td id="demo2" valign="top"></td>
</tr>
</table>

</div>

jquery 实现图片无缝向左滚动的更多相关文章

  1. js和jquery实现图片无缝轮播的不同写法

    多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...

  2. jquery特效:无缝向上循环滚动列表

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...

  3. 利用jquery实现向左滚动效果及offset的使用

    昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:

  4. jquery图片无缝滚动代码左右 上下无缝滚动图片

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS和jQuery分别实现图片无缝滚动效果

    一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...

  6. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery图片无缝滚动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. Jquery+css实现图片无缝滚动轮播

    Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...

  9. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

随机推荐

  1. mqtt paho ssl java端代码

    参考链接:http://blog.csdn.net/lingshi210/article/details/52439050 mqtt 的ssl配置可以参阅 http://houjixin.blog.1 ...

  2. Linux实战案例(1)CentOS修改主机名(hostname)

    1.临时修改主机名 显示主机名: oracle@localhost:~$ hostname localhost 修改主机名: oracle@localhost:~$ sudo hostname orc ...

  3. Docker学习笔记 - Docker客户端和服务端

    学习内容: Docker客户端和服务端的通讯方式:client和自定义程序 Docker客户端和服务端的连接方式:socket 演示Docker客户端和服务端之间用remote-api通讯:nc   ...

  4. Linux实战案例(6)yum查找、卸载、和安装软件

    0.查找要安装的软件名字 yum search iostat就能查到以及iostat相干的安装包了, 别的想安装一个程序,只记得一部门名称,也可以用这个措施来实现安装 yum search png | ...

  5. Spring Security 入门(3-11)Spring Security 的使用-自定义登录验证和回调地址

    配置文件 security-ns.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmln ...

  6. Spring Security 入门(1-9)国际化的使用

  7. 修改hosts 流畅使用coursera

    以管理员权限打开 C盘 ->  Windows-> System32 -> drives -> etc -> hosts文件 在hosts文件最后写入 52.84.246 ...

  8. java中的interface

    转载: Java不支持多重继承,即一个类只能有一个父类 为了克服单继承的缺点,Java使用了接口,一个类可以实现多个接口 接口是抽象方法和常量值定义的集合,是一种特殊的抽象类接口中只包含常量和方法的定 ...

  9. Java8新特性第1章(Lambda表达式)

    在介绍Lambda表达式之前,我们先来看只有单个方法的Interface(通常我们称之为回调接口): public interface OnClickListener { void onClick(V ...

  10. Java IO(一)

    在Java中,所有的io类都放在java.io包中. 在IO操作中,我们总是会从一个源数据读取到一个目标数据.那么这个源数据和目标数据可以是文件,流等等.那最常见的就是文件,就像我们在本地电脑上写入东 ...