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 ...
随机推荐
- oracle常用数据类型说明
类型 含义 存储描述 备注 CHAR 固定长度字符串 最大长度2000bytes VARCHAR2 可变长度的字符串, 最大长度4000bytes 可做索引的最大长度749 NCHAR 根据字符集而定 ...
- asp.net 退出登陆(解决退出后点击浏览器后退问题仍然可回到页面问题)
代码如下: Session.Abandon(); Response.Redirect("Login.aspx"); 但是这样点点击浏览器的后退仍然可以回到刚才的页面,这可不行,在网 ...
- iPhone激活策略知识讲解:官方解锁和黑解
iPhone激活策略知识讲解:官方解锁和黑解 [复制链接] LEECHY 该用户从未签到 1372 XY豆 438 帖子 440 贡献 苹果花 积分 2250 发消息 电梯直达 楼主 发 ...
- 解决解密时出现"要解密的数据的长度无效" 或 "填充无效无法被移除" 的错误
1.首先排除数据库中读取加密后的字段是否被强制截断. 2.AES加密后的byte[]首先应用base64( Convert.ToBase64String)编码一次,若直接用utf8的话会报上述错误,若 ...
- 终于完成了 源码 编译lnmp环境
经过了大概一个星期的努力,终于按照海生的编译流程将lnmp环境源码安装出来了 nginx 和php 主要参考 http://hessian.cn/p/1273.html mysql 主要参考 http ...
- linux svn服务器(一)
先安装 参考文章http://www.cnblogs.com/zhaoyang-1989/articles/3455481.html
- 微信JSSDK分享朋友圈微信自定义分享接口
服务项目 新手技术咨询 企业技术咨询 定制开发 服务说明 QQ有问必答 QQ.微信.电话 微信开发.php开发,网站开发,系统定制,小程序开发 价格说明 200元/月 1000/月 商议 ...
- 1002 A+B for Polynomials (25 分)
This time, you are supposed to find A+B where A and B are two polynomials. Input Specification: Each ...
- HTTP发包工具 -HTTPie
原文: https://zm8.sm-tc.cn/?src=l4uLj8XQ0IuekZWWi5bRk5CZi5qN0ZyQktCPkIyL0M6cnMmcx8qdoM7PnMrIyMnI&u ...
- MTR追踪的好工具
yum install mtr 或者win下的winmtr 直接可以统计.