js实现图片滚动效果

JavaScript09

js实现图片滚动效果,第1张

<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>

首先准备以下的东西:

1、图片若干,并规范化图片名字。从1开始。

2、在存放图片的文档中新建一个txt。

3、在txt中输入内容。

4、txt后缀改为html,完成

txt的内容:

<script>

var i

function pre()

{

if(i==1)return

i--

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

function next()

{

i++

document.getElementById("pic").innerHTML="<img src="+i+".jpg></img>"

}

</script>

<body>

<div onclick="pre()"><</div>

<div id="pic" ><</div>

<div onclick="next()">></div>

</body>