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>

这里面需要注意的是,要加上我在style里面写的样式,另外两个注意点就是:里面的li不能float,最外围的xunhuan的高度要小于里面元素的高度,以足够它循环滚动。

例子是向上滚动的效果,如果想要向左滚动,做相应的改动即可。

原文地址:https://www.cnblogs.com/sunli6772/p/4077862.html