jquery 实现图片无缝向左滚动
<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 实现图片无缝向左滚动的更多相关文章
- js和jquery实现图片无缝轮播的不同写法
多掌握一种方法总是会有好处的,学习编程就要多思考,举一反三 下面写一下实现图片自动播放的代码,由于学习的是javascript,代码量很大,所以又学习了jquery库的操作,非常简便 还有非常有逼格的 ...
- jquery特效:无缝向上循环滚动列表
效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...
- 利用jquery实现向左滚动效果及offset的使用
昨天和今天做了一个轮播图,它的tab标签不是1,2,3这样的数据表示,而是使用圆圈表示,效果如下:
- jquery图片无缝滚动代码左右 上下无缝滚动图片
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS和jQuery分别实现图片无缝滚动效果
一.效果图 二.使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g ...
- jQuery图片无缝滚动JS代码ul/li结构
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery图片无缝滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Jquery+css实现图片无缝滚动轮播
Today,在XX学院的教学视频中,偶尔看到了Jquery+css实现图片无缝滚动轮播视频教程,虽然以前已写过类似的,但是我感觉他学的比较精简.为了方便以后做项目时直接拷贝,特地写出来,顺便和大家分享 ...
- JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动
一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- Linq SelectMany 交叉连接
class Student1 { public int Score { get; set; } public Student1(int score) { this.Score = score; } } ...
- SpringCloud的Hystrix(五) Hystrix机制
参考链接:http://www.jianshu.com/p/e07661b9bae8 一.前言 大型复杂的分布式系统中,高可用相关的技术架构非常重要.高可用架构非常重要的一个环节,就是如何将分布式系统 ...
- python之集合,深浅copy
一. 集合 集合是无序的,不重复的数据集合,它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的.以下是集合最重要的两点: 去重,把一个列表变成集合,就自动去重了. ...
- SpringMVC(五):@RequestMapping下使用@RequestParam绑定请求参数值
在处理方法入参使用@RequestParam可以把请求参数传递给请求方法,@RequestParam包含的属性值: --- value :参数名称 --- required :是否必须,默认为true ...
- POJ-3641 Pseudoprime numbers---快速幂
题目链接: https://vjudge.net/problem/POJ-3641 题目大意: 问p是不是伪素数.伪素数条件:①p不是素数.② ap = a (mod p). 思路: 直接快速幂模板+ ...
- Lua中table的实现-《Lua设计与实现》
本文来自<Lua设计与实现>的阅读笔记,推荐Lua学习者可以购买一本,深入浅出讲解lua的设计和实现原理,很赞,哈哈 Lua中对于表的设计,是基于数组和散列表,和其他语言不同,对于数组 ...
- linux远程传输
scp scp 命令是 SSH中最方便有用的命令了,scp就是secure copy,是用来进行远程文件拷贝的.数据传输使用 ssh,并且和ssh 使用相同的认证方式,提供相同的安全保证. 与rcp ...
- python三元操作符
#比较大小更简单了 x,y=3987,24361 small=(x if x<y else y) print(small) #方法一:比较三个数的大小找出较大的一个 x,y,z=8,1,13 ...
- Ajax实现注册无刷新验证用户名是否存在
1. [代码][JavaScript]代码 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 ...
- Linux下文件权限(一)用户ID和用户组ID
最近在读<unix环境高级编程>,看到文件权限这里比较糊涂,主要设计多个用户ID和用户组ID,包括下面两个: (1)实际用户ID和实际用户组ID:这一部分表示我们究竟是谁.这两个字段在登录 ...