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 協議》，轉載必須註明作者和本文連結