一个页面放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实现的捐赠管理完整实例
Jan 20 Javascript
JSONObject使用方法详解
Dec 17 Javascript
第十章之巨幕页头缩略图与警告框组件
Apr 25 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
Aug 20 Javascript
js使用swiper实现层叠轮播效果实例代码
Dec 12 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
在vue中利用v-html按分号将文本换行的例子
Nov 14 Javascript
JS数组进阶示例【数组的几种函数用法】
Jan 16 Javascript
详解js创建对象的几种方式和对象方法
Mar 01 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
后宫无数却洁身自好的男主,唐三只爱小舞
2020/03/02 国漫
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
php 文件缓存函数
2011/10/08 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
twig模板常用语句实例小结
2016/02/04 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JavaScript Event学习第十章 一些可替换的事件对
2010/02/10 Javascript
jQuery最佳实践完整篇
2011/08/20 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
jQuery客户端分页实例代码
2013/11/18 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jQuery中toggleClass()方法用法实例
2015/01/05 Javascript
基于jQuery实现页面搜索功能
2020/03/26 Javascript
Vue.js组件间通信方式总结【推荐】
2018/11/23 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
关于layui时间回显问题的解决方法
2019/09/24 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
vue实现页面切换滑动效果
2020/06/29 Javascript
Vue使用axios引起的后台session不同操作
2020/08/14 Javascript
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python实现导出数据生成excel报表的方法示例
2017/07/12 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
python监控文件并且发送告警邮件
2018/06/21 Python
pytorch方法测试详解——归一化(BatchNorm2d)
2020/01/15 Python
Python实现FLV视频拼接功能
2020/01/21 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
纯css3实现的竖形无限级导航
2014/12/10 HTML / CSS
澳大利亚汽车零部件、音响及配件超市:Automotive Superstore
2018/06/19 全球购物
凯蒂·佩里个人女鞋品牌:Katy Perry Collections
2019/04/04 全球购物
哪些情况下不应该使用索引
2015/07/20 面试题
环境工程大学生个人的自我评价
2013/10/08 职场文书
团日活动总结报告
2014/06/25 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书