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 ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...
随机推荐
- 批量检测GoAhead系列服务器中Digest认证方式的服务器弱口令
最近在学习用python写爬虫工具,某天偶然发现GoAhead系列服务器的登录方式跟大多数网站不一样,不是采用POST等方法,通过查找资料发现GoAhead是一个开源(商业许可).简单.轻巧.功能强大 ...
- SpringBoot入门:Spring Data JPA 和 JPA(理论)
参考链接: Spring Data JPA - Reference Documentation Spring Data JPA--参考文档 中文版 纯洁的微笑:http://www.ityouknow ...
- 阿里云API网关(8)开发指南-SDK下载
网关指南: https://help.aliyun.com/document_detail/29487.html?spm=5176.doc48835.6.550.23Oqbl 网关控制台: https ...
- ribbon 详解
ribbon 详解 1. 顶层架构 2. 简单的示例:使用ResourceTemplate方式 @Test public void testGroup(){ HttpResourceGroup htt ...
- CentOS7配置php7.0支持redis
配置之前应该是环境已经搭好了,phpinfo的页面可以加载出来. 使用git clone下载git上的phpredis扩展包 [root@VM_103_117_centos ]#git clone ...
- Http post请求数据分析 --作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我.
Http post请求数据分析 作者, 你的这个需求我可以做, 我在平台上无法给你发消息和接收你的任务, 所以,如果你看到这个信息, 可以联系我. 软件需求就是不停post一个网址,然后根据返回的信息 ...
- ZOJ-2913 Bus Pass---BFS进阶版
题目链接: https://vjudge.net/problem/ZOJ-2913 题目大意: 问哪个区域到公交路线上所有区域的最大距离最小 思路: 这里要求出到底是哪个区域到某些指定区域的最大距离最 ...
- C#调用Python,报错No module named os
C#调用Python 环境:Windows 8.1,已经安装Python2.7(C:\Python27),配置了环境变量. 已经安装VS2013,VS2017 1.安装IronPython 下载地址h ...
- innerText、innerHtml与value
1.innerText是id为object的闭合标签内的文本,输入输出的是转义文本(字符串); (label控件用innerText有效)2.innerHtml是<div>标签内的文本, ...
- Leetcode 804. Unique Morse Code Words 莫尔斯电码重复问题
参考:https://blog.csdn.net/yuweiming70/article/details/79684433 题目描述: International Morse Code defines ...