利用纯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;
}

vuejs如何实现文字上下滚动效果

vue页面如何利用插件实现列表滚动循环

html利用marquee标签实现滚动效果（上下左右）

countNumber.js文字滚动出错修复

标签： 文字滚动, 无缝对接

上面是“利用纯javascript做一个无缝对接滚动效果”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2649.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！