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 3687 简单题——bitset
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3687 关于 bitset :https://blog.csdn.net/snowy_smil ...
- Tomcat 自动化部署
Tomcat 自动化部署脚本 使用方法: ./autodeploy.sh test 其中autodeploy.sh 为脚本的文件名, test为war的文件名. #!/bin/sh now=`date ...
- box-shadow 边框样式
如下 box-shadow: 0 1px 3px 0 rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 2px 1px -1px rgba(0,0,0,.1 ...
- Android NDK R9 安装配置 无需Cygwin
转自:http://www.cr173.com/soft/66623.html NDK是一个工具集,可让您实现您的应用程序使用本机代码的语言,如C和C + +.Android NDK 是在SDK前面又 ...
- Jmeter 指令记录
${__machineIP()} 获取当前本地IP地址(后面发现其实这个是在函数助手里面可以选择的)
- mongo获取lbs数据
进入mongo目录执行./mongo 命令 #切换数据库use coachloc db.runCommand({geoNear : "coachloc" ,near : [113. ...
- 远程复制文件scp使用
1. install sudo apt-get install openssh-client openssh-server 2. login ssh remoteuser@remoteIP 3. co ...
- Nginx Tengine ngx_http_upstream_check_module 健康功能检测使用
该模块可以为Tengine提供主动式后端服务器健康检查的功能. 该模块在Tengine-1.4.0版本以前没有默认开启,它可以在配置编译选项的时候开启:./configure --with-http_ ...
- linux中的ftp命令
转载至:https://www.cnblogs.com/mingforyou/p/4103022.html 一.ftp的get命令和mget命令有何不同? get一次只下载一个文件:mget一次可以下 ...
- 特征选择:方差选择法、卡方检验、互信息法、递归特征消除、L1范数、树模型
转载:https://www.cnblogs.com/jasonfreak/p/5448385.html 特征选择主要从两个方面入手: 特征是否发散:特征发散说明特征的方差大,能够根据取值的差异化度量 ...