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 ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- node.js的安装的配置
一.Node.js 安装配置 Node.js 提供在Windows和Linux上安装 1. Window 上安装Node.js 64 位安装包下载地址 : https://nodejs.org/di ...
- 分享:纯 css 瀑布流 和 js 瀑布流
分享一次纯 css 瀑布流 和 js 瀑布流 纯 css 写瀑布流 1.multi-columns 方式: 通过 Multi-columns 相关的属性 column-count.column-ga ...
- flask +gevent+nginx+Gunicorn+supervisor部署flask应用
上篇 可以完美部署flask ,但是视乎在结合gevent+apscheduler 实现异步非阻塞后台和定时任务的时候视乎不是那么完美.请教了前辈,决定使用flask+gevent+nginx+g ...
- kafka知识体系-kafka设计和原理分析
kafka设计和原理分析 kafka在1.0版本以前,官方主要定义为分布式多分区多副本的消息队列,而1.0后定义为分布式流处理平台,就是说处理传递消息外,kafka还能进行流式计算,类似Strom和S ...
- Python系列-python函数(functools)
有一些函数内置到了functools这个模块里 partial(func, *args, **keywords) from functools import partial def add(x,y): ...
- 用js来实现那些数据结构09(集合01-集合的实现)
说到集合,第一个想到的就是中学学到的那个数学概念:集合.在我们开始集合相关的js实现前,我们有必要来了解一下什么是集合以及集合的数学概念. 好吧,我们一起来复习一下早就被我们遗忘的集合. 集合是由一组 ...
- [SDOI 2017]数字表格
Description 题库链接 记 \(f_i\) 为 \(fibonacci\) 数列的第 \(i\) 项. 求 \[\prod_{i=1}^n\prod_{j=1}^mf_{gcd(i,j)}\ ...
- [TJOI 2016&HEOI 2016]排序
Description 在2016年,佳媛姐姐喜欢上了数字序列.因而他经常研究关于序列的一些奇奇怪怪的问题,现在他在研究一个难题 ,需要你来帮助他.这个难题是这样子的:给出一个1到n的全排列,现在对这 ...
- [HNOI2004]树的计数
题目描述 输入输出格式 输入格式: 输入文件第一行是一个正整数n,表示树有n个结点.第二行有n个数,第i个数表示di,即树的第i个结点的度数.其中1<=n<=150,输入数据保证满足条件的 ...
- C++Primer学习——动态内存
静态内存:用来保存static 栈内存:保存非static 智能指针: shared_ptr:允许多个指针指向一个对象 unique_ptr:独占所指对象 weak_ptr:一种弱引用,指向share ...