一个页面放2段图片滚动代码出现冲突的问题如何解决


Posted in Javascript onDecember 21, 2012

为什么我在首页同时复制出二段代码后图片不能流动显示了?

<div align="center"> 
<table style="TABLE-LAYOUT: fixed; border-collapse:collapse" cellSpacing=0 cellPadding=0 width=760 border=1 height="150" bordercolor="#1989D7"> 
<tr> 
<td height="150"> 
<div id=demo style="OVERFLOW: hidden; WIDTH: 100%; HEIGHT: 150px"> 
<table cellPadding=0 align=left border=0 cellspace="0"> 
<tr> 
<td id=demo1 vAlign=top><!--$最新图片$--></td> 
<td id=demo2 vAlign=top></td> 
</tr> 
</table> 
</div> 
<SCRIPT> 
var speed=25 
demo2.innerHTML=demo1.innerHTML 
function Marquee1(){ 
if(demo2.offsetWidth-demo.scrollLeft<=0) 
demo.scrollLeft-=demo1.offsetWidth 
else{ 
demo.scrollLeft++ 
} 
} 
var MyMar=setInterval(Marquee1,speed) 
demo.onmouseover=function() {clearInterval(MyMar)} 
demo.onmouseout=function() {MyMar=setInterval(Marquee1,speed)} 
</SCRIPT>

由于这2段代码完全相同,所以产生冲突。把另一段代码简单修改一下代码即可。红色标注的地方是需要修改的。
你试试:
<!--第二段向右滚动代码开始--> 
<div id=gundong style="OVERFLOW: hidden; WIDTH: 568px; HEIGHT: 126px"> 
<table cellPadding=0 align=left border=0 cellspace="0"> 
<tr> 
<td id=gundong1 vAlign=top> 
<!--{$GetPicPhoto(3,0,true,0,20,false,false,0,1,1,126,90,20,0,true,20)}--> </td> 
<td id=gundong2 vAlign=top></td> 
</tr> 
</table> 
</div> 
<script> 
var speed=25 
gundong2.innerHTML=gundong1.innerHTML 
gundong.scrollLeft=gundong.scrollWidth 
function Marquee1(){ 
if(gundong.scrollLeft<=0) 
gundong.scrollLeft+=gundong2.offsetWidth 
else{ 
gundong.scrollLeft-- 
} 
} 
var MyMar1=setInterval(Marquee1, speed) 
gundong.onmouseover=function() {clearInterval(MyMar1)} 
gundong.onmouseout=function() {MyMar1=setInterval(Marquee1, speed)} 
</script> 
<!--第二段向右滚动代码结束-->
Javascript 相关文章推荐
javascript数字数组去重复项的实现代码
Dec 30 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
基于d3.js实现实时刷新的折线图
Aug 03 Javascript
聊一聊JS中的prototype
Sep 29 Javascript
jQuery命名空间与闭包用法示例
Jan 12 Javascript
JS跨域请求外部服务器的资源
Feb 06 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信提示 在浏览器打开 效果实现过程解析
Sep 10 Javascript
vue开发移动端底部导航条功能
Apr 08 Javascript
谈谈node.js中的模块系统
Sep 01 Javascript
vue实现无缝轮播效果(跑马灯)
May 14 Vue.js
TextArea设置MaxLength属性最大输入值的js代码
Dec 21 #Javascript
JQuery实现简单时尚快捷的气泡提示插件
Dec 20 #Javascript
JQuery实现简单验证码提示解决方案
Dec 20 #Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 #Javascript
关于图片的预加载过程中隐藏未知的
Dec 19 #Javascript
给页面渲染时间加速 干掉Dom Level 0 Event
Dec 19 #Javascript
img onload事件绑定各浏览器均可执行
Dec 19 #Javascript
You might like
php中文字母数字验证码实现代码
2008/04/25 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
[企业公众号]升级到[企业微信]之后发送消息失败的解决方法
2017/06/30 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
PHP使用curl_multi_select解决curl_multi网页假死问题的方法
2018/08/15 PHP
javascript客户端解决方案 缓存提供程序
2010/07/14 Javascript
分享一个asp.net pager分页控件
2012/01/04 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
2013/08/07 Javascript
原生js实现模拟滚动条
2015/06/15 Javascript
js控制一个按钮是否可点击(可使用)disabled的实例
2017/02/14 Javascript
微信小程序五星评分效果实现代码
2017/04/06 Javascript
JS实现经典的中国地区三级联动下拉菜单功能实例【测试可用】
2017/06/06 Javascript
深入浅析javascript继承体系
2017/10/23 Javascript
Vue.js实现可配置的登录表单代码详解
2018/03/29 Javascript
Layer弹出层动态获取数据的方法
2018/08/20 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
Vue 实现列表动态添加和删除的两种方法小结
2018/09/07 Javascript
Vue商品控件与购物车联动效果的实例代码
2019/07/21 Javascript
详解一些适用于Node.js的命名约定
2019/12/08 Javascript
React.js组件实现拖拽排序组件功能过程解析
2020/04/27 Javascript
[06:43]2018DOTA2国际邀请赛寻真——VGJ.Thunder
2018/08/11 DOTA
浅谈python对象数据的读写权限
2016/09/12 Python
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
Python3.7 基于 pycryptodome 的AES加密解密、RSA加密解密、加签验签
2019/12/04 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
jupyter实现重新加载模块
2020/04/16 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
豆腐の盛田屋官网:日本自然派的豆乳面膜、肥皂、化妆水、乳液等
2016/10/08 全球购物
销售内勤岗位职责
2014/04/15 职场文书
2014大学辅导员工作总结
2014/12/02 职场文书