<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. WPF 自定义RadioButton样式

    一.RadioButton基本样式 RadioButton基本样式包含两种状态,这里也是使用两张图片来代替两种状态,当然你也可以通过IconFont或Path来替换这两种状态. 效果如下: 样式代码如 ...

  2. python/MySQL(索引、执行计划、BDA、分页)

    ---恢复内容开始--- python/MySQL(索引.执行计划.BDA.分页) MySQL索引: 所谓索引的就是具有(约束和加速查找的一种方式)   创建索引的缺点是对数据进行(修改.更新.删除) ...

  3. Sublime Text3 运行Python 出现Error:Decode error - output not utf-8

    问题描述: Sublime Text 3 在build Python时,如果python源代码输出有中文,例如"print('中文')",Sublime Text 会报 [Deco ...

  4. SecureCRT安装

    第一步:下载SecureCRT&SecureCRT激活工具 首先下载SecureCRT安装包和SecureCRT激活工具,SecureCRT&SecureCRT激活工具下载地址:链接: ...

  5. 南阳OJ-91-阶乘之和---二进制枚举(入门)

    题目链接:http://acm.nyist.edu.cn/JudgeOnline/problem.php?pid=91 题目大意: 给你一个非负数整数n,判断n是不是一些数(这些数不允许重复使用,且为 ...

  6. 深入理解.net - 1.继承的本质

    最近偶然看到这个博客你必须知道的.net,作者6的飞起啊,干货十足,还是07年写的...写的也很赞,评论更精彩,在此强烈推荐一波,看的感觉就像沙漠里发现了绿洲一样,很兴奋,意犹未尽,迫不及待的看完一篇 ...

  7. Javascript闭包(Closure)

    1.Javascript特殊的变量作用域.变量的作用域无非就是两种:全局变量和局部变量.Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量. function f1() { var ...

  8. Spring-Cloud(三)Eureka注册中心实现高可用

    前言: spring-cloud为基础的微服务架构,所有的微服务都需要注册到注册中心,如果这个注册中心阻塞或者崩了,那么整个系统都无法继续正常提供服务,所以,这里就需要对注册中心进行集群,换言之,高可 ...

  9. Sevrlet 工作原理解析-转

    从 Servlet 容器说起 要介绍 Servlet 必须要先把 Servlet 容器说清楚,Servlet 与 Servlet 容器的关系有点像枪和子弹的关系,枪是为子弹而生,而子弹又让枪有了杀伤力 ...

  10. 初探Javascript之DOM

    DOM对象(文档对象模型) HTML DOM 是 W3C 标准(是 HTML 文档对象模型的英文缩写,Document Object Model for HTML).HTML DOM 定义了用于 HT ...