JS实现文字图片无缝滚动

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

今天做项目遇到一个滚动的效果，本来打算用marquee做的，因为它是html自带的标签，写起来简单，但是有一个问题就是marquee不能实现无缝滚动，上网找了一些方法，发现marquee可以实现无缝，但要在脑残的IE环境下。

没办法，为了达到要求，自己又从网上找了一些相关的代码加以修改，最终实现了效果，现在把代码分享给大家，有问题还请大家多指正。

代码如下：

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文字列表无缝向上滚动JavaScript代码</title>
<style type="text/css">
#xunhuan{
overflow:hidden; /*溢出的部分不显示*/
height:100px;
}
#xunhuan1,#xunhuan2{height: auto;}
</style>
</head>
<body>
<div id="xunhuan">
<div id="xunhuan1">
<ul>
<li>这是第1条</li>
<li>这是第2条</li>
<li>这是第3条</li>
<li>这是第4条</li>
<li>这是第5条</li>
<li>这是第6条</li>
</ul>
</div>
<div id="xunhuan2"></div>
</div>
<script>
var speed=10; //数字越大速度越慢
var tab=document.getElementById("xunhuan");
var tab1=document.getElementById("xunhuan1");
var tab2=document.getElementById("xunhuan2");
tab2.innerHTML=tab1.innerHTML; //克隆demo1为demo2
function Marquee(){
if(tab2.offsetTop-tab.scrollTop<=0)//当滚动至demo1与demo2交界时
tab.scrollTop-=tab1.offsetHeight //demo跳到最顶端
else{
tab.scrollTop++
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};//鼠标移上时清除定时器达到滚动停止的目的
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};//鼠标移开时重设定时器
</script>
</body>
</html>