利用纯javascript做一个无缝对接滚动效果

如何利用纯javascript做一个无缝对接滚动效果，下面web建站小编给大家介绍一下实现代码。

html代码

<div class="scroll" id="scroll">
  <ul id="scroll1">
  	<li>利用js/jquery改变css样式</li>
  	<li>jquery改变元素的宽度（width）和高度（height）</li>
  	<li>jquery关于Deferred延迟对象介绍</li>
  	<li>jquery浅谈input有哪些触发事件</li>
  	<li>css兼容不同分辨率自适应@media的运用技巧</li>
  	<li>css代码画三角形箭头（上下左右）</li>
  </ul>
  <ul id="scroll2"></ul>
</div>

javascript代码

var scroll = document.getElementById("scroll");
var li = scroll.getElementsByTagName("li");
var scroll1 = document.getElementById("scroll1");
var scroll2 = document.getElementById("scroll2");
scroll2.innerHTML = scroll1.innerHTML;
scroll.scrollTop = 0;
function rollStart(){
  if(scroll.scrollTop >= scroll1.scrollHeight){
  	scroll.scrollTop = 0;
  }else{
  	scroll.scrollTop++;
  }
}
var timer = setInterval(rollStart, 50);
scroll.onmouseover = function(){
  clearInterval(timer);
}
scroll.onmouseout = function(){
  timer = setInterval(rollStart, 50);
}

css代码

.scroll {
  width: 500px;
  height: 150px;
  overflow: hidden;
}
li {
  height: 40px;
}