JavaScript无缝滚动 记录

<div style="width: 872px;overflow: hidden;height: 174px;" id="scroll-body">
    <div class=""  style="width: 8000px;">
        <ul class="retail-merchant-scroll" id="scroll-img" style="margin: 0px;float: left;padding: 0px;">
            <li></li>
            <li></li>
        </ul>
        <ul id="scroll-img-1" style="margin: 0px;float: left;padding: 0px;"></ul>
    </div>
</div>

function marquee(direction) {
        var obj = document.getElementById('scroll-body');
        var obj1 = document.getElementById('scroll-img');
        var obj2 = document.getElementById('scroll-img-1');
        if (direction == 'left') {
          if (obj2.offsetWidth - obj.scrollLeft <= 0) {
            obj.scrollLeft -= obj1.offsetWidth;
          }else{
            obj.scrollLeft+=1;
          }
        }
    }
    function marqueeStart(direction) {
        var obj = document.getElementById('scroll-body');
        var obj1 = document.getElementById('scroll-img');
        var obj2 = document.getElementById('scroll-img-1');
        obj2.innerHTML = obj1.innerHTML;//copy
        var marqueeVar = window.setInterval("marquee('"+direction+"')",20);
        obj.onmouseover = function(){
          window.clearInterval(marqueeVar);
        }
        obj.onmouseout = function(){
          marqueeVar = window.setInterval("marquee('"+direction+"')",20)
        }
    }
    marqueeStart('left');

     #scroll-body ul li{
   float: left;
   width: 155px;
   height: 142px;
   list-style: none;
   box-shadow: 0 2px 10px 0 rgb(61 67 77 / 8%);
   border-radius: 2px;
   overflow: hidden;
   margin: 16px;
 }

此处只记录向左滚动

本作品采用《CC 协议》,转载必须注明作者和本文链接
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!