js原生实现 无缝滚动图片
<!-- 无缝滚动图片开始 -->
<div id=demopic style="OVERFLOW: hidden; WIDTH: 100%; COLOR: #fff; HEIGHT: 170px">
<table width="100%" border=0 align=center cellpadding=0 cellspacing="0" cellspace="0">
<tr>
<td valign=top id=demopic1><table width="100%" border="0" cellspacing="10" cellpadding="0">
<tr>
<td align="center"><a href="" target=_blank><img src="./images/W001.jpg" width="110" height="150" border="0" alt="法治新闻传播" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W002.jpg" width="110" height="150" border="0" alt="人民检察" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W003.jpg" width="110" height="150" border="0" alt="最高人民检察院影视中心" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W004.png" width="110" height="150" border="0" alt="政法网络舆情" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W005.jpg" width="110" height="150" border="0" alt="人民监督" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W006.jpg" width="110" height="150" border="0" alt="方圆律政" /></a></td>
<td align="center"><a href="" target=_blank><img src="./images/W007.jpg" width="110" height="150" border="0" alt="方圆" /></a></td>
</tr>
</table></td>
<td width="12" valign=top id=demopic2></td>
</tr>
</table>
</div>
<script>
var speed=15
demopic2.innerHTML=demopic1.innerHTML
function Marquee()
{ if(demopic2.offsetWidth-demopic.scrollLeft<=0)
demopic.scrollLeft-=demopic1.offsetWidth
else{
demopic.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
demopic.onmouseover=function() {
clearInterval(MyMar)
}
demopic.onmouseout=function() {
MyMar=setInterval(Marquee,speed)
}
</script>
<!-- 无缝滚动图片结束 -->
js原生实现 无缝滚动图片的更多相关文章
- (转载)无缝滚动图片的js和jquery两种写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 向上下左右不间断无缝滚动图片的效果(兼容火狐和IE)
<!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/ ...
- js动画之无缝滚动
效果图如下: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- js实现标准无缝滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS 在 HTML 无缝滚动
marquee图片无缝滚动先了解一下对象的几个的属性:innerHTML: 设置或获取位于对象起始和结束标签内的 HTMLscrollHeight: 获取对象的滚动高度.scrollLeft: 设置或 ...
- js文字的无缝滚动(上下)
使用scrolltop值的递增配合setInterval与setTimeout实现相关效果,左右无缝滚动使用scrollLeft即可 Dom内容 <div id="container& ...
- js实现表格无缝滚动效果
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 用JS写的无缝滚动特效
代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta ...
随机推荐
- bzoj 2784 [JLOI2012]时间流逝——树上高斯消元
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2784 一个状态可以加很多个能量圈,但减少能量圈的情况只有一种.所以可以用树来刻画. 然后就变 ...
- RK3288 mipi屏调试流程
CPU:RK3288 系统:Android 5.1 1.修改kernel/arch/arm/configs/rockchip_defconfig,打开mipi屏开关 # CONFIG_LCD_GENE ...
- 关于新建android项目时 appcompat_v7报错问题的一点总结
说下我的解决方案: 1.确保 appcompat项目的 target版本 低于 实际项目的android版本(就像.net中 低版本的 framewrok项目不能引用高版本framework项目一样) ...
- AIX6.1 线程模型说明
引文:线程模型(Threading Model)默认从进程域 (M:N 模型 ) 改为系统全局域 (1:1 模型 ) 在 AIX 5L 中,pthread 线程的默认模型是 m:n 方式,而从 AIX ...
- springMVC学习(7)-springMVC校验
一.校验理解: 对于安全要求较高点建议在服务端进行校验. 控制层conroller:校验页面请求的参数的合法性.在服务端控制层conroller校验,不区分客户端类型(浏览器.手机客户端.远程调用) ...
- zufe oj 引水工程( 巧妙地把在i建水设为e[0][i])
引水工程 时间限制: 3 Sec 内存限制: 128 MB提交: 11 解决: 6[提交][状态][讨论版] 题目描述 南水北调工程是优化水资源配置.促进区域协调发展的基础性工程,是新中国成立以来 ...
- RESTful Java client with Apache HttpClient / URL /Jersey client
JSON example with Jersey + Jackson Jersey client examples RESTful Java client with RESTEasy client f ...
- Linux下不同颜色文件的类型
蓝色表示目录: 绿色表示可执行文件: 红色表示压缩文件: 浅蓝色表示链接文件:主要是使用ln命令建立的文件 灰色表示其它文件: 红色闪烁表示链接的文件有问题了: 黄色是设备文件,包括block, ch ...
- Lua语言中的__index,__newindex,rawget和rawset
转自:http://blog.csdn.net/wangbin_jxust/article/details/12108189 在谈及Lua中的__index,__newindex,rawget和raw ...
- Goroutine(协程)为何能处理大并发?
简单来说:协程十分轻量,可以在一个进程中执行有数以十万计的协程,依旧保持高性能. 进程.线程.协程的关系和区别: 进程拥有自己独立的堆和栈,既不共享堆,亦不共享栈,进程由操作系统调度. 线程拥有自己独 ...