JS图片滚动怎么让鼠标经过后停止啊?

JavaScript015

JS图片滚动怎么让鼠标经过后停止啊?,第1张

我写的代码,要下班了,所以就简单注释一下。鼠标经过会停止,移开鼠标会继续走。已经测试过了。另存xx.htm打开可看效果。

<script type="text/javascript">

var timer_movex

start_timer()

function start_timer(){

  timer_movex = setInterval(function() {//setInterval是js循环定时器每隔一段时间就执行一次function代码

  var x = document.getElementById('x')//获得id为x的html元素

  if(x.offsetLeft >= 800)

    x.style.left = 0//如果移动到了800的位置,则跳回左边0点重新开始移动

  else

    x.style.left = x.offsetLeft + 50//向右移动20个像素

}, 1000)//每隔1000毫秒移动一次

}

function stop_timer() {

  clearInterval(timer_movex)

}

function movex(v) {

  var x = document.getElementById('x')//获得id为x的html元素

  x.style.left = x.offsetLeft + v//移动v个像素,v为正数则向右,负数则向左。x.style.left即为左边框位置。

}

</script>

<div id="x" style="position:absolute left:500px top:100px width:100px height:100px border=1px solid #000" onmouseover="stop_timer()" onmouseout="start_timer()">

<h1>TEST</h1>

</div>

<form>

<input id="test" onclick="movex(-100)" value="点击左移" type="button"/>

<input id="test" onclick="movex(100)" value="点击右移" type="button"/>

<input id="test" onclick="start_timer()" value="start" type="button"/>

<input id="test" onclick="stop_timer()" value="stop" type="button"/>

</form>

我写一个你参考吧。<script language="javascript">

var initTop = 0

function init(){

initTop = document.getElementById("advLayer").style.pixelTop

}

function move(){

document.getElementById("advLayer").style.pixelTop = initTop + document.body.scrollTop

}

window.onscroll = move// 窗体的滚动时间,当页面滚动时调用move()函数

</script><body onLoad="init()">

<img src="image/top.jpg"><img src= "image/content1.jpg"><img src="image/content2.jpg"><img src = "image/foot.jpg">

<div id = "advLayer" style="position:absoluteright:20pxtop:80pxz-index:10">

<A href="#"><img src="image/lady_0007.jpg" width="295" height="176" border="0"></A>

</div>

</body>希望能帮到您,谢谢。

<!--

在图片标签里添加onmouseover事件,并且将该图片地址作为参数传给show_big函数

-->

<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

<div align='center' id='demo' style='overflow:hiddenheight:125pxwidth:740px'><!--滚动区的高度和宽度-->

<table align='center' cellpadding='0' border='0'>

<tr>

<td id='demo1' valign='top'>

<table width='100%' cellpadding='0' cellspacing='0' border='0' align='center'>

<tr valign='top'>

<td align='center'>

<TABLE width=100% border=0 align=center cellPadding=0 cellSpacing=0>

<TR>

<TD background="image/bg_03.gif"> </TD>

<TD width="105" height="85" align="center" bgcolor="#E9E9E9">

<a href="?action=showproduct&id=2" target=_blank title='免费上网卡'>

<img src="goods/201085233124824.jpg" alt="免费上网卡" width="105" height="80" border="0" onload="javascript:DrawImage(this)" onmouseover="show_big('t')"></a>

</TD>

<TD background="image/bg_03.gif"> </TD>

<TD width="105" height="85" align="center" bgcolor="#E9E9E9">

<a href="?action=showproduct&id=3" target=_blank title='最新款语音监听器'>

<img src="goods/2010322133233752.jpg" alt="最新款语音监听器" width="105" height="80" border="0" onload="javascript:DrawImage(this)" onmouseover="show_big('t')"></a>

</TD>

<TD background="image/bg_03.gif"> </TD>

<TD width="105" height="85" align="center" bgcolor="#E9E9E9">

<a href="?action=showproduct&id=4" target=_blank title='远拍王'>

<img src="goods/20104557186.jpg" alt="远拍王" width="105" height="80" border="0" onload="javascript:DrawImage(this)" onmouseover="show_big('t')"></a>

</TD>

<TD background="image/bg_03.gif"> </TD>

<TD width="105" height="85" align="center" bgcolor="#E9E9E9">

<a href="?action=showproduct&id=8" target=_blank title='手电筒摄像机'>

<img src="goods/20103845747868.jpg" alt="手电筒摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this)"></a>

</TD>

<TD background="image/bg_03.gif"> </TD>

<TD width="105" height="85" align="center" bgcolor="#E9E9E9">

<a href="?action=showproduct&id=9" target=_blank title='打火机摄像机'>

<img src="goods/2009115195532598.jpg" alt="打火机摄像机" width="105" height="80" border="0" onload="javascript:DrawImage(this)"></a>

</TD>

</TR>

</TABLE>

</td>

</tr>

</table>

</td>

<td id=demo2 valign=top></td>

</tr>

</table>

</div>

<div id="bimg"></div>

<script>

var Picspeed=15

demo2.innerHTML=demo1.innerHTML

function Marquee1(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

}

var MyMar1=setInterval(Marquee1,Picspeed)

demo.onmouseover=function() {clearInterval(MyMar1)

}

demo.onmouseout=function() {MyMar1=setInterval(Marquee1,Picspeed)

document.getElementById('bimg').innerHTML=''//当鼠标移出是清空图片

}

function show_big(src){

document.getElementById('bimg').innerHTML='<img src="'+src+'" width=300 height=400>'//在id为bimg的div中显示图片

}

</script>

<!--最新图文代码结束-->