一个页面放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 相关文章推荐
潜说js对象和数组
May 25 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
两个select多选模式的选项相互移动(示例代码)
Jan 11 Javascript
js导航栏单击事件背景变换示例代码
Jan 13 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jquery 获取索引值在一定范围的列表方法
Jan 25 jQuery
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
react脚手架如何配置less和ant按需加载的方法步骤
Nov 28 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
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文件缓存smarty模板应用实例分析
2016/02/26 PHP
PHP使用DOM和simplexml读取xml文档的方法示例
2017/02/08 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
ThinkPHP5.1框架页面跳转及修改跳转页面模版示例
2019/05/06 PHP
Laravel服务容器绑定的几种方法总结
2020/06/14 PHP
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
Reactjs实现通用分页组件的实例代码
2017/01/19 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
vue实现点击选中,其他的不选中方法
2018/09/05 Javascript
Vue渲染过程浅析
2019/03/14 Javascript
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
你或许不知道的一些npm实用技巧
2019/07/04 Javascript
vue本地打开build后生成的dist文件夹index.html问题
2019/09/04 Javascript
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
python3.6 实现AES加密的示例(pyCryptodome)
2018/01/10 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
Python人脸识别第三方库face_recognition接口说明文档
2019/05/03 Python
Python使用MyQR制作专属动态彩色二维码功能
2019/06/04 Python
PyQt5组件读取参数的实例
2019/06/25 Python
详解Matplotlib绘图之属性设置
2019/08/23 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
在python里创建一个任务(Task)实例
2020/04/25 Python
总经理岗位职责范本
2014/02/02 职场文书
八年级美术教学反思
2014/02/02 职场文书
挂职自我鉴定
2014/02/26 职场文书
蓝颜请假条
2014/04/11 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
2014年安全工作总结范文
2014/11/13 职场文书
长江三峡导游词
2015/01/31 职场文书
贫困生证明范文
2015/06/16 职场文书
关于童年的读书笔记
2015/06/26 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书