<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>无缝滚动</title>
<style type="text/css">
img{
border:0
height:100pxwidth:150px
}
td img{
margin:0 10px
}
</style>
</head>
<body>
<!-- 纵向向无缝滚动-->
<div id="demo" style="overflow:hiddenheight:350pxwidth:200px">
<div id="demo1">
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_01.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_02.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_03.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_04.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_05.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_06.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_07.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_08.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_10.jpg"></a><p>
<a href="#" target="_blank"><img src="jsfile/imagesa32/gundong_11.jpg"></a><p>
</div>
<div id="demo2">
</div>
</div>
<script>
var speed=40
var demo2=document.getElementById("demo2")
var demo1=document.getElementById("demo1")
var demo=document.getElementById("demo")
demo2.innerHTML=demo1.innerHTML
function Marquee(){
if(demo2.offsetTop-demo.scrollTop<=0)
demo.scrollTop-=demo1.offsetHeight
else{
demo.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed)
demo.onmouseover=function() {clearInterval(MyMar)}
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>
<!-- 横向无缝滚动-->
<div style="margin-top:20px">
<div id="scroll_div" style="overflow: hiddenWIDTH: 778px" align=center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td id="scroll_begin">
<a href="#"><img src="jsfile/imagesa32/gundong_11.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_01.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_02.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_03.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_04.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_05.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_06.jpg" border=0></a><a href="#"><img src="jsfile/imagesa32/gundong_07.jpg" border=0></a></td>
<td id="scroll_end"></td>
</tr>
</table>
</div></div>
<script>
var speed1=40
var scroll_end = document.getElementById("scroll_end")
var scroll_div = document.getElementById("scroll_div")
scroll_end.innerHTML=scroll_begin.innerHTML
function Marquee1(){
if(scroll_end.offsetWidth-scroll_div.scrollLeft<=0)
scroll_div.scrollLeft-=scroll_begin.offsetWidth
else{
scroll_div.scrollLeft++
}
}
var MyMar1=setInterval(Marquee1,speed1)
scroll_div.onmouseover=function() {clearInterval(MyMar1)}
scroll_div.onmouseout=function() {MyMar1=setInterval(Marquee1,speed1)}
</script>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>javascript无缝滚动</title>
<meta charset="gb2312"/>
<style type="text/css">
#marquee ,#marquee li { padding:0pxmargin:0px}
#marquee { position:relativelist-style:noneheight:150pxwidth:210pxpadding-left:5pxoverflow:hiddenborder:10px solid #eee}
#marquee li { position:absolutefont-size:12px}
#marquee a { display:blockcolor:#999999text-decoration:none}
</style>
<script type="text/javascript">
var Marquee = function(id){
try{document.execCommand("BackgroundImageCache", false, true)}catch(e){}
var container = document.getElementById(id),
slide = container.getElementsByTagName("li")[0],
speed = arguments[1] || 80, //速度
delta = 0,//当前滚动的位置
critical = slide.offsetHeight//临界点
slide.innerHTML += slide.innerHTML
var rolling = function(){
delta == -critical ? delta = 0 : delta--
slide.style.top = delta + "px"
}
var timer = setInterval(rolling,speed)//设置定时器
container.onmouseover=function() {clearInterval(timer)}//鼠标移到marquee上时，清除定时器，停止滚动
container.onmouseout=function() {timer=setInterval(rolling,speed)}//鼠标移开时重设定时器
}
window.onload = function(){
Marquee("marquee")
}
</script>
</head>
<body>
<ul id="marquee">
<li>
<a href="#">纤云弄巧，飞星传恨，银汉迢迢暗度。</a><br />
<a href="#">金风玉露一相逢，便胜却、人间无数。</a><br />
<a href="#">柔情似水，佳期如梦。忍顾鹊桥归路！</a><br />
<a href="#">两情若是久长时，又岂在、朝朝暮暮。</a><br />
<a href="#">千重劫，百世难，亘古匆匆，弹指间！</a><br />
<a href="#">不死躯，不灭魂，震古烁今，无人敌！</a><br />
<a href="#">待到阴阳逆乱时，以我魔血染青天！</a><br />
</li>
</ul>
</body>
</html>
