js实现图片上下左右滚动代码

合集下载

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果

鼠标点击按钮图片切换+自动切换+左右按钮点击切换效果上一次在我的文库中分享了点击按钮，图片左右切换轮播效果代码，今天主要是分享【鼠标点击按钮，图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码】。

最后的效果如下：Html代码部分：<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>图片轮播效果制作</title><link rel="stylesheet" type="text/css" href="css/style.css"><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/style.js"></script></head><body><div class="banner"><ul class="pic"><li><a href="#"><img src="images/1.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/2.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/3.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/4.jpg" alt="美女" width="350" height="495"></a></li><li><a href="#"><img src="images/5.jpg" alt="美女" width="350" height="495"></a></li></ul><ul class="anniu"><li class="on"></li><li></li><li></li><li></li><li></li></ul><ul class="lr"><li class="pre"><a href="#"> < </a></li><li class="next"><a href="#"> > </a></li></ul></div></body></html>Css代码部分：*{margin:0px;padding:0px}li{list-style:none}a{text-decoration:none}img{border:0px}.banner{width:350px;height:495px;margin:100px auto;position:relative;overflow:hidden}.banner .pic{width:9999px;height:495px}.banner .pic li{width:350px;height:495px;float:left}.banner .anniu{width:100px;height:16px;position:absolute;left:165px;top:470px}.banner .anniu li{width:16px;height:16px;background:white;float:left;margin:2px;display:inline; cursor:pointer;border-radius:100%}.banner .anniu li.on{background:red}.banner .lr{width:350px;height:50px;position:absolute;top:250px;display:none}.banner .lr a{color:white}.banner .lr .pre{width:20px;height:50px;float:left;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}.banner .lr .next{width:20px;height:50px;float:right;background:none repeat scroll 0px 0px rgba(1, 0, 0, 0.6);text-align:center;line-height:50px;cursor:pointer}Javascript代码部分：$(function(){//鼠标滑过banner，左右按钮进行显示和隐藏$(".banner").hover(function(){$(".lr").show();},function(){$(".lr").hide();});//点击下面的小按钮，图片进行左右切换效果$(".anniu li").click(function(){$(this).addClass("on").siblings().removeClass("on");var num=$(this).index();$(".pic").animate({marginLeft:-350*num},"slow");});//图片自动轮播效果var a=0;var automatic=setInterval(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");},6000);//点击左右按钮，图片进行切换效果$(".pre").click(function(){a--;a=(a+5)%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});$(".next").click(function(){a++;a=a%5;$(".pic").animate({marginLeft:-350*a},"slow");$(".anniu li").eq(a).addClass("on").siblings().removeClass("on");});});。

div实现向左右无缝滚动图片效果（跑马灯）

div实现向左右无缝滚动图片效果（跑马灯）div+css学习笔记22（用div实现向左无缝滚动图片效果）JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动废话少说，代码贴出来：<div id="imgmarquee" style="OVERFLOW: hidden; WIDTH: 580px; align: left; background-color:#0099CC;"><div style="width:1200px"><span id="marquePic1" style="width:600px; background-color:#990033;"><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /><img src="../images/dialog/4.gif" /></span><span id="marquePic2" style="width:600px;background-color:#990033;"></span></div></div><script type="text/javascript">var imgmarquee = document.getElementById('imgmarquee');var marquePic2 = document.getElementById('marquePic2');var marquePic1 = document.getElementById('marquePic1');var speed=10;//控制移动的速度,数越大越慢marquePic2.innerHTML=marquePic1.innerHTML;//把marquePic1的内容复制到marquePic2里面function Marquee(){if(imgmarquee.scrollLeft>=marquePic1.scrollWidth){imgmarquee.scrollLeft=0;}else{//demo.scrollLeft++;imgmarquee.scrollLeft++;}}var marqueetemp=setInterval(Marquee,speed);imgmarquee.onmouseover=function(){clearInterval(marqueetemp)} //鼠标移到上面停止并清除计数imgmarquee.onmouseout=function(){marqueetemp=setInterval(Marquee,speed)} //鼠标离开重新计数</script>－－－－－－－－－－－－参考资料（向右，向上，向下代码同理，只是控制的js不同而已，把下面的id改成对应的就ok了）－－－－－－－－－－－－向右－－－－－－－－－－－－<script language="javascript"type="text/javascript"></script>－－－－－－－－－－－－－向下－－－－－－－－－－－－－<script language="javascript"type="text/javascript"></script>－－－－－－－－－－－向上－－－－－－－－－－－<script language="javascript"type="text/javascript"></script><DIV id=demo_1 style="OVERFLOW: hidden; HEIGHT: 136px"><DIV id=demo1_1><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div><div id=gleft><a href=""><img src="" border="0" width=150 height="120"/></a></div></DIV><DIV id=demo2_1></DIV></DIV><SCRIPT>var speed=25demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0)demo.scrollLeft-=demo1.offsetWidthelse{demo.scrollLeft++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} </SCRIPT>其中<div id=gleft>这里的gleft的样式你自己定义下就OK了。

js使用transition效果实现无缝滚动

js使⽤transition效果实现⽆缝滚动作者：李⼤雷前⾔⽆缝轮播⼀直是⾯试的热门题⽬，⽽⼤部分答案都是复制第⼀张到最后。

诚然，这种⽅法是⾮常标准，那么有没有另类⼀点的⽅法呢？第⼀种⽅法是需要把所有图⽚⼀张张摆好，然后慢慢移动的，但是我能不能直接不摆就硬移动呢？如果你使⽤过vue的transition，我们是可以通过给每⼀张图⽚来添加⼊场动画和离场动画来模拟这个移动•进场动画就是从最右侧到屏幕中央•出场动画是从屏幕中央到左侧移出这样看起来的效果就是图⽚从右边⼀直往左移动，但是这个不⼀样的地⽅是，我们每⼀个元素都有这个进场动画和离场动画，我们根本不⽤关⼼它是第⼏个元素，你只管轮播就是。

如果不⽤vue呢？很简单，我们⾃⼰实现⼀个transtition的效果就好啦，主要做的是以下两点•元素显⽰的时候，即display属性不为none的时候，添加xx-enter-active动画•元素消失的时候，先添加动画xx-leave-active, 注意要让动画播完才消失••••••••••••••functionhide( el) { el.className = el.className.replace( ' slide-enter-active', '') el.className += ' slide-leave-active' el.addEventListener( 'animationend',animationEvent) } functionanimationEvent( e) { e.target.className =e.target.className.replace( ' slide-leave-active', '') e.target.style.display = 'none' e.target.removeEventListener('animationend',animationEvent) } functionshow( el) { el.style.display = 'flex' el.className += ' slide-enter-active' }这⾥我们使⽤了animationend来监听动画结束，注意这⾥每次从新添加类的时候需要重新添加监听器，不然会⽆法监听。

动易图片滚动代码

一、向左滚动1、调用“图片”栏目图片的向左滚动代码（效果演示）以下是最新图片标签说明。

以下是引用片段：-----------------------------------〈tr〉〈td class=main_title_575〉〈B〉最新图片〈/B〉〈/td〉〈/tr〉〈tr〉〈td class=main_tdbg_575 vAlign=center align=middle height=131〉〈!--{$GetPicPhoto(3,0,True,0,4,False,False,0,1,1,130,90,20,0,True,4)}--〉〈/td〉〈/tr〉------------------------------------用以下是滚动代码代替上面红色的标签部分，注意红色部分的变化。

------------------------------------〈!--滚动代码开始--〉〈div id=demo style="OVERFLOW: hidden; WIDTH: 560px; HEIGHT: 120px"〉〈table cellPadding=0 align=left border=0 cellspace="0"〉〈tr〉〈td id=demo11 vAlign=top〉〈!--{$GetPicPhoto(3,0,True,0,12,False,False,0,1,1,130,90,20,0,True,12)}--〉〈/td〉〈td id=demo12 vAlign=top〉〈/td〉〈/tr〉〈/table〉〈/div〉〈SCRIPT〉var speed=15demo12.innerHTML=demo11.innerHTMLfunction Marquee11(){if(demo12.offsetWidth-demo.scrollLeft〈=0)demo.scrollLeft-=demo11.offsetWidthelse{demo.scrollLeft++}}var MyMar1=setInterval(Marquee11,speed)demo.onmouseover=function() {clearInterval(MyMar1)}demo.onmouseout=function() {MyMar1=setInterval(Marquee11,speed)}〈/SCRIPT〉〈!--滚动代码结束--〉-----------------------------------2、文章频道图片向左滚动代码（效果演示）以下是文章频道模板最新图片部分代码-----------------------------------〈tr〉〈td Class="main_title_575"〉〈b〉最新图片{$ChannelShortName}〈/b〉〈/td〉〈/tr〉〈tr〉〈td Class="main_tdbg_575"〉{$GetPicArticle(ChannelID,0,True,0,4,false,false,0,3,2,130,90,20,0,True,4)} 〈/ td〉〈/tr〉〈tr〉〈td Class="main_shadow"〉〈/td〉〈/tr〉------------------------------------用以下是滚动代码代替上面红色的标签，注意红色部分的变化。

Html、js图片轮播代码

Html、js图片轮播代码现在基本上每个网站都有一个自动轮播的banner广告图，在没有任何按钮的情况下，图片在规定的时间内进行自动切换。

下面是html、js 图片轮播代码详情。

代码效果图实例：第一秒：第二秒：第三秒：详细代码如下：Html代码部分：<body><ul class="banner"><li><img src="images/1.jpg"></li><li><img src="images/2.jpg"></li><li><img src="images/3.jpg"></li></ul></body>Css代码部分：<style type="text/css">ul,li{margin:0px;padding:0px}li{list-style:none}.banner{width:630px;height:250px;margin:100px auto;overflow:hidden;cursor:pointer} </style>Javascript代码部分：<script type="text/javascript"src="jquery.js"></script><script type="text/javascript">$(function(){var timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)$(".banner li").hover(function(){clearInterval(timer);},function(){timer=setInterval(function(){if($(".banner li:last").is(":hidden")){$(".banner li:visible").addClass("on");$(".banner li[class=on]").next().fadeIn("slow");$(".banner li[class=on]").hide().removeClass("on");}else{$(".banner li:last").hide();$(".banner li:first").fadeIn("slow");}},2000)})})</script>【Jquery.js】是一个jquery库，只要百度一下搜索“jquery”下载这个文件就行。

js scroll方法

js scroll方法JS scroll方法是JavaScript中用于实现滚动效果的方法。

通过scroll方法，我们可以控制网页元素在页面上的滚动行为，包括向上滚动、向下滚动等。

本文将详细介绍JS scroll方法的使用及其相关知识点。

一、基本概念滚动效果是指将网页内容的一部分或全部在视窗内滚动显示的效果。

当网页内容超出视窗大小时，我们可以通过滚动操作来查看被隐藏的内容。

JS scroll方法就是用来实现这种滚动效果的。

二、使用方法JS scroll方法可以通过以下两种方式进行调用：1. 通过元素对象调用，例如：element.scroll(x, y)；2. 通过window对象调用，例如：window.scroll(x, y)。

其中，x和y是指定滚动位置的水平和垂直坐标。

当指定为0时，表示滚动到顶部或左侧；当指定为元素的宽度或高度时，表示滚动到底部或右侧。

例如，element.scroll(0, 0)表示将元素滚动到顶部。

三、常见应用场景1. 页面导航：通过scroll方法可以实现点击导航菜单时页面平滑滚动到指定位置的效果，提升用户体验。

2. 无限滚动：通过监听滚动事件，当网页滚动到底部时，自动加载更多内容，实现无限滚动效果。

3. 轮播图：通过scroll方法和定时器可以实现自动滚动的轮播图效果，展示多张图片或广告。

四、注意事项1. scroll方法只能用于具有滚动条的元素，如div、iframe等，不能用于普通的文本或图片元素。

2. 在使用scroll方法时，需要注意元素的定位方式，通常需要设置元素的position属性为relative或absolute，以便正确计算滚动位置。

3. 在滚动到指定位置后，可以使用scrollTop和scrollLeft属性获取滚动位置，以便进行进一步的操作。

五、示例代码下面是一个简单的示例代码，演示了如何使用JS scroll方法实现页面导航的滚动效果：```html<!DOCTYPE html><html><head><style>#content {height: 1000px;overflow: auto;}#section1, #section2, #section3 { height: 500px;}</style></head><body><div id="content"><div id="section1"><h1>Section 1</h1><p>This is section 1.</p></div><div id="section2"><h1>Section 2</h1><p>This is section 2.</p></div><div id="section3"><h1>Section 3</h1><p>This is section 3.</p></div></div><script>var navLinks = document.querySelectorAll('a');var sections = document.querySelectorAll('div');for (var i = 0; i < navLinks.length; i++) {navLinks[i].addEventListener('click', function(e) {e.preventDefault();var target = document.querySelector(this.getAttribute('href'));window.scroll({top: target.offsetTop,behavior: 'smooth'});});}</script></body></html>```在上述示例代码中，我们使用了一个包含多个div元素的父容器content，并为每个div元素添加了一个id属性作为锚点。

带左右箭头图片轮播的JS代码

带左右箭头图⽚轮播的JS代码轮播图实现效果见下图，图⽚能⾃⼰轮播，点击左右按钮进⾏翻页轮播，⿏标悬停图⽚或者标题上，停⽌轮播；效果图为：复制代码代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>带左右箭头图⽚轮播</title><style type="text/css"></style></head><body><div class="rollBox"><div class="LeftBotton" onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()"></div> <div class="Cont" id="ISL_Cont"><div class="ScrCont"><div id="List1"><div class="pic"><a href="/" target="_blank"><img src="images/1.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/2.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/3.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/4.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/5.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/6.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/7.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div><div class="pic"><a href="/" target="_blank"><img src="images/8.jpg" /></a><div><span><a href="https:///" target="_blank">酷站代码-特效1</a></span><span>45446547</span></div></div></div><div id="List2"></div></div></div><div class="RightBotton" onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()"></div></div></body><script language="javascript" type="text/javascript"><![CDATA[//><!]]></script></html>。

多张图片向左连续滚动代码（带链接和鼠标悬停属性）

多张图片向左连续滚动代码（带链接和鼠标悬停属性）<script language="JavaScript">  </script> </head> <body> <div id="Layer1" style="position:absolute; left:45; top:-2; width:422; height:64; z-index:1"> <font color="#FF0000" face="幼圆" size="6"><b>精彩放送</b></font></div> <center> <script language="JavaScript1.2">  </script> </center> <p align="center"> <center> <table border="0" width="73%" height="51" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0"> <tr> <td width="100%" height="45"> <font face="宋体"color="#FF0000" style="font-size: 9pt"> <strong style="font-weight: 400"> 一幅幅精美的图画轮流滚动显示，特别象电视节目开始结束时的精彩时刻回顾，更倾向于现在流行的网页多媒体现象，加上超链接，就成为特酷的动态滚动导航菜单，用在你的网页中，可以引导潮流呀！</strong></font></td> </tr> </table> </center> <hr>如果不出效果请刷新当前页面-加载JS等文件后一定有效果<br><a href="/">欢迎访问网页资源特效代码站</a> <script language='javascript'src='/dlgg/201211/43.js'></script></script>。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-trans itional.dtd"><html xmlns="/1999/xhtml"><head></head><body><div id="colee" style="overflow:hidden;height:253px;width:410 px;"><div id="colee1"><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p><p><img src=""></p></div><div id="colee2"></div></div><script>var speed=30;var colee2=document.getElementById("colee2"); var colee1=document.getElementById("colee1"); var colee=document.getElementById("colee"); colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2function Marquee1(){//当滚动至colee1与colee2交界时if(colee2.offsetTop-colee.scrollTop<=0){colee.scrollTop-=colee1.offsetHeight; //colee 跳到最顶端}else{colee.scrollTop++}}var MyMar1=setInterval(Marquee1,speed)//设置定时器//鼠标移上时清除定时器达到滚动停止的目的colee.onmouseover=function(){clearInterval(MyMar1)}//鼠标移开时重设定时器colee.onmouseout=function(){MyMar1=setInterva l(Marquee1,speed)}</script><br><div id="colee_bottom" style="overflow:hidden;height:253px;width:410 px;"><div id="colee_bottom1"><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> <p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p> </div><div id="colee_bottom2"></div></div><script>var speed=30varcolee_bottom2=document.getElementById("colee_ bottom2");varcolee_bottom1=document.getElementById("colee_ bottom1");varcolee_bottom=document.getElementById("colee_b ottom");colee_bottom2.innerHTML=colee_bottom1.innerHT MLcolee_bottom.scrollTop=colee_bottom.scrollHei ghtfunction Marquee2(){if(colee_bottom1.offsetTop-colee_bottom.scrol lTop>=0)colee_bottom.scrollTop+=colee_bottom2.offsetH eightelse{colee_bottom.scrollTop--}}var MyMar2=setInterval(Marquee2,speed)colee_bottom.onmouseover=function() {clearInterval(MyMar2)}colee_bottom.onmouseout=function(){MyMar2=setInterval(Marquee2,speed)}</script><br><div id="colee_left" style="overflow:hidden;width:100px;"><table cellpadding="0" cellspacing="0" border="0"><tr><td id="colee_left1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> </tr></table></td><td id="colee_left2" valign="top"></td></tr></table></div><script>//使用div时，请保证colee_left2与colee_left1是在同一行上.var speed=30//速度数值越大速度越慢varcolee_left2=document.getElementById("colee_le ft2");varcolee_left1=document.getElementById("colee_le ft1");varcolee_left=document.getElementById("colee_lef t");colee_left2.innerHTML=colee_left1.innerHTML function Marquee3(){if(colee_left2.offsetWidth-colee_left.scrollL eft<=0)//offsetWidth 是对象的可见宽度colee_left.scrollLeft-=colee_left1.offsetWidt h//scrollWidth 是对象的实际内容的宽，不包边线宽度else{colee_left.scrollLeft++}}var MyMar3=setInterval(Marquee3,speed)colee_left.onmouseover=function() {clearInterval(MyMar3)}colee_left.onmouseout=function(){MyMar3=setInterval(Marquee3,speed)}</script><br><div id="colee_right" style="overflow:hidden;width:100px;"><table cellpadding="0" cellspacing="0"border="0"><tr><td id="colee_right1" valign="top" align="center"><table cellpadding="2" cellspacing="0" border="0"><tr align="center"><td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> <td><p><imgsrc="/jscss/demoimg/200907/bg3.jpg"></p></td> </tr></table></td><td id="colee_right2" valign="top"></td></tr></table></div><script>var speed=30//速度数值越大速度越慢varcolee_right2=document.getElementById("colee_r ight2");varcolee_right1=document.getElementById("colee_r ight1");varcolee_right=document.getElementById("colee_ri ght");colee_right2.innerHTML=colee_right1.innerHTML function Marquee4(){if(colee_right.scrollLeft<=0)colee_right.scrollLeft+=colee_right2.offsetWi dthelse{colee_right.scrollLeft--}}var MyMar4=setInterval(Marquee4,speed)colee_right.onmouseover=function() {clearInterval(MyMar4)}colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)} </script></body></html>。