怎么用JS脚本使多张图片滚动？

JavaScript020

怎么用JS脚本使多张图片滚动？,第1张

推荐使用<marquee>实现图片滚动,示例:

<marquee

scrolldelay="100"

direction="up"

onmouseover="this.stop()"

onmouseout="this.start()"><img

src="xxxxxxx"></marquee>

其中scrolldelay="100"

===>指滚动延迟时间,单位是毫秒ms,默认为90ms

direction="up"

===>指滚动方向,默认从左往右,可取的值为:up,down,left,right

onmouseover="this.stop()"

===>指鼠标悬停在图片上时,图片静止

onmouseout="this.start()"

===>指鼠标离开图片时,图片运动

希望对您有所帮助

<script type="text/javascript">

var speed = 20//滚动速度

var maq

var m1//第一份滚动的内容

var m2//第二份滚动的内容

var timer//定时器

function run(){

if(m1.offsetWidth<=maq.scrollLeft){

maq.scrollLeft-=m1.offsetWidth

}else{

maq.scrollLeft+=6

}

}

window.onload=function(){

maq=document.getElementById("maq")

m1=document.getElementById("m1")

m2=document.getElementById("m2")

m2.innerHTML=m1.innerHTML

if(timer==null){

timer=window.setInterval(run,speed)

}

maq.onmouseover=function(){

window.clearInterval(timer)

}

maq.onmouseout=function(){

timer=window.setInterval(run,speed)

}

}

</script>

</head>

<body>

<div id="maq" style="height:200pxwidth:180pxoverflow:hidden">

<table>

<tr>

<td id="m1">

<table>

<tr>

<td><img src="file:///E|/Images/player1.png" width="174" height="268" /></td>

<td><img src="file:///E|/Images/player2.png" width="174" height="268" /></td>

<td><img src="file:///E|/Images/player3.png" width="174" height="268" /></td>

</tr>

</table>

</td>

<td id="m2"></td>

</tr>

</table>

</div>

</body>

楼主详细代码在这里这已经是相当的简介版了你只要把图片路径改一下就能用了，~要采纳呦~你懂得~~

<SCRIPT language="JavaScript">

var speed=50//设置滚动速度

demo2.innerHTML=demo1.innerHTML //复制dome1为dome2

function Marquee(){

if(demo2.offsetTop-demo.scrollTop<=0) //当滚动至dome1与dome2交界时

demo.scrollTop-=demo1.offsetHeight //dome跳到最顶端

else{

demo.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed) //设置定时器

demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器，继续滚动

</SCRIPT>

<div id="demo" style="overflow: hiddenheight: 600width: 180background: #214984color: #ffffff">

<div id="demo1" align="center">

<!-- 定义图片 -->

</div>

<div id="demo2" align="center"></div>

</div>