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 ...
随机推荐
- 字符设备之register_chrdev与register_chrdev_region(转)
之前写字符设备驱动,都是使用register_chrdev向内核注册驱动程序中构建的file_operations结构体,之后创建的设备文件,只要是主设备号相同(次设备号不同),则绑定的都是同一个fi ...
- Java JDBC连接Oracle
1. 安装Oracle数据库,我这里使用的是Oracle 12c 2. 创建Java工程 connection-oracle 注意:使用的JavaSE-1.8 3. 在Oracle的安装目录里,将dj ...
- 阿里巴巴Java开发手册-并发处理
1. [强制]获取单例对象需要保证线程安全,其中的方法也要保证线程安全.说明:资源驱动类.工具类.单例工厂类都需要注意. 2. [强制]创建线程或线程池时请指定有意义的线程名称,方便出错时回溯.正例: ...
- Jquery获取元素高度
第一步, 获取你要得到高度的那个div的jQuery对象, 获得方法有很多很多种, 具体你可以看一下jQuery API文档里的选择器部分, 在这里我只跟你说一个最直接的方法, 通过id获得: $(& ...
- Django 博客项目02 Form验证+ 上传头像(预览)+Ajax用户注册
头像预览 $("#avatar_file").change(function(){ // 获取上传的文件对象 var file=$(this)[0].files[0]; // 读取 ...
- Hibernate对substring和cast的支持问题
http://blog.sina.com.cn/s/blog_8acd9e4b0102uwev.html Hibernate对substring和cast的支持问题 问题:要比较日期的范围...这是只 ...
- POSIX 消息队列 之 概述 链接方式
NAMEmq_overview —— POSIX消息队列概述 DESCRIPTIONPOSIX消息队列允许进程以消息的形式交换数据.此API与System V消息队列(msgget(2),msgsnd ...
- [转]my97 datepicker IE9+ 故障修复方法
转自:http://blog.csdn.net/xuwj1984/article/details/38733483 问题1:my97 datepicker 不能弹出日期下拉框. 解决方法: 1.下载最 ...
- Windows下python 安装Mysqldb模块
CMD执行 pip install mysql-python 报错如下: 1.如果报类似 Microsoft Visual C++ 9.0 is required < Unable to fin ...
- Python中__init__和__new__的区别详解
__init__ 方法是什么? 使用Python写过面向对象的代码的同学,可能对 __init__ 方法已经非常熟悉了,__init__ 方法通常用在初始化一个类实例的时候.例如: # -*- cod ...