效果如图：
代码如下：speed为速度，可以自行修改，但是不可以为0.1等。否则无效
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>向上无缝滚动，可以改成左右无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#active ul li{
width: 150px;
height: 50px;
list-style: none;
box-sizing: border-box;
/*border: 1px solid blue;*/
}
#active ul{
position: absolute;
}
a{
text-decoration: none;
font-size: 12px;
}
#active{
overflow: hidden;
background: yellow;
width: 150px;
height: 200px;
margin: 100px auto;
position: relative;
}
</style>
</head>
<body>
<button id="button1">向上运动</button>
<button id="button2">向下运动</button>
<div>鼠标移入清除定时器，移除重新载入定时器</div>
<div id="active">
<ul>
<li><a href="javascript:;">1.你生活在光亮里，你就觉得全世界都是光亮的。</a></li>
<li><a href="javascript:;">2.你要是铁了心要走，那我也铁了</a></li>
<li><a href="javascript:;">3.无问西东，只问自由，只问盛放，只问深情</a></li>
<li><a href="javascript:;">4.如果你有梦想，就要去捍卫它。 </a></li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
var button1=document.getElementById('button1')
var button2=document.getElementById('button2')
var oDiv=document.getElementById('active')
var oUl=oDiv.getElementsByTagName('ul')[0]
var aLi=oUl.getElementsByTagName('li')
oUl.innerHTML=oUl.innerHTML+oUl.innerHTML
oUl.style.height=aLi[0].offsetHeight*aLi.length+'px'
oUl.style.background='pink'
var speed=1;//速度
//定时器里面的函数
function move(){
if(oUl.offsetTop<=-oUl.offsetHeight/2){
oUl.style.top='0';
}
if(oUl.offsetTop>0){
oUl.style.top=-oUl.offsetHeight/2+'px'
}
oUl.style.top=oUl.offsetTop+speed+'px'
}
var timer=setInterval(move,30)
oDiv.onmouseover=function(){
clearInterval(timer)
}
oDiv.onmouseout=function(){
timer=setInterval(move,30)
}
button1.onclick=function(){
console.log('向上运动')
speed=-1
}
button2.onclick=function(){
console.log('向下运动')
speed=+1
}
</script>
网友评论