js无缝滚动

悟静 2013-10-05

展开全文

纵向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www./default.asp?cateID=6" mce_href="http://www./default.asp?cateID=6" target="_blank">JS</a>多张图片纵向无缝滚动</title>
</head>
<body>
<div id="demo" style="height:600px; width:260px;overflow:hidden ">
<div id="demo1">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div><div id="demo2"></div>
<mce:script type="text/javascript"><!--
var speed=50
demo2.innerHTML=demo1.innerHTML
function Marquees(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMars=setInterval(Marquees,speed)
demo.onmouseover=function() { clearInterval(MyMars) }
demo.onmouseout=function() { MyMars=setInterval(Marquees,speed) }
zlselect('6');
// --></mce:script>
</div>
</body>
</html>
横向
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><a href="http://www./default.asp?cateID=6" mce_href="http://www./default.asp?cateID=6" target="_blank">JS</a>多张图片横向无缝滚动</title>
</head>
<body>
<div id=demo style="overflow:hidden;width:800px;border:2px solid #e0e0e0;padding:2px;" onmouseover="stopscroll();"
onmouseout="doscroll()">
<div id="demo1" style="white-space:nowrap;padding:0;" mce_style="white-space:nowrap;padding:0;">
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
<a href="default.asp" mce_href="default.asp"><img src="work2007/images/1_222.jpg" mce_src="work2007/images/1_222.jpg" height=368 width=256
border=0></a>
</div>
</div>
<mce:script type="text/javascript"><!--
var t=demo.scrollWidth
demo1.innerHTML+=demo1.innerHTML
function doMarquee()
{
demo.scrollLeft=demo.scrollLeft<demo.scrollWidth-demo.offsetWidth?demo.scrollLeft+1:t-demo.offsetWidth
}
function doscroll()
{
sc=setInterval(doMarquee,20)
}
function stopscroll()
{
clearInterval(sc)
}
doscroll()
// --></mce:script>
</body>
</html>