一个页面放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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
你需要知道的10个最佳javascript开发实践小结
Apr 15 Javascript
Js-$.extend扩展方法使方法参数更灵活
Jan 15 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
seajs下require书写约定实例分析
May 16 Javascript
详解Vue项目在其他电脑npm run dev运行报错的解决方法
Oct 29 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
Sep 24 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
Feb 01 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
小程序实现筛子抽奖
May 26 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中SESSION使用中的一点经验总结
2012/03/30 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
Prototype使用指南之hash.js
2007/01/10 Javascript
javascript 必知必会之closure
2009/09/21 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
js实现仿QQ秀换装效果的方法
2015/03/04 Javascript
教你使用javascript简单写一个页面模板引擎
2015/05/05 Javascript
浅析C/C++,Java,PHP,JavaScript,Json数组、对象赋值时最后一个元素后面是否可以带逗号
2016/03/22 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
ie下js不执行的几种可能
2017/02/28 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
在Vue中使用echarts的实例代码(3种图)
2017/07/10 Javascript
js阻止默认右键的下拉菜单方法
2018/01/02 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
PyCharm在win10的64位系统安装实例
2017/11/26 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python下载的库包存放路径
2020/07/27 Python
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
Spartoo美国:欧洲排名第一的在线时装零售商
2019/12/12 全球购物
大学生文员专业个人求职信范文
2014/01/05 职场文书
单位单身证明范本
2014/01/11 职场文书
儿媳婚宴答谢词
2014/01/14 职场文书
大二法英学生职业生涯规划范文
2014/02/27 职场文书
《跟踪台风的卫星》教学反思
2014/04/10 职场文书
励志演讲稿大全
2014/08/21 职场文书
初中学习计划书范文
2014/09/15 职场文书
党员转正大会主持词
2015/07/02 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电