带有无限循环的选框，没有空间并在悬停时停止

编程问答 2022-05-23

问题描述

我几乎做到了，但它闪烁并在一段时间后重置需要无限循环而不重置我无法得到它所以请帮助我。如果你觉得同样的例子非常值得一看。

我几乎做到了，但它闪烁并在一段时间后重置需要无限循环而不重置我无法得到它所以请帮助我。如果你觉得同样的例子非常值得一看。

代码笔链接：https://codepen.io/Designer12/pen/poNaNjd

<div class="comman-marquee">
        <div class="comman-marquee-inner">
            <p>
                <a href="#"> Comparte y recibe 15€ </a>·<a href="javascript:void(0);"> Envío y devolución gratis </a>·<a href="javascript:void(0);"> Derecho devolución 45 días </a>·
            </p>
            <p>
                <a href="#"> Comparte y recibe 15€ </a>·<a href="javascript:void(0);"> Envío y devolución gratis </a>·<a href="javascript:void(0);"> Derecho devolución 45 días </a>·
            </p>
            <p>
                <a href="#"> Comparte y recibe 15€ </a>·<a href="javascript:void(0);"> Envío y devolución gratis </a>·<a href="javascript:void(0);"> Derecho devolución 45 días </a>·
            </p>
        </div>
    </div>


    <script>
    function handleMarquee(){
      const marquee = document.querySelectorAll('.comman-marquee');
      let speed = 1;
      let lastScrollPos = 0;
      let timer;
    
      marquee.forEach(function(el){
        // stop animation on mouseenter
        mouseEntered = false;
        document.querySelector('.comman-marquee-inner').addEventListener('mouseenter',function() {
          mouseEntered = true;
        })
        document.querySelector('.comman-marquee-inner').addEventListener('mouseleave',function() {
          mouseEntered = false
        })
    
        const container = el.querySelector('.comman-marquee-inner');
        const content = el.querySelector('.comman-marquee-inner > *');
        //Get total width
        const  elWidth = content.offsetWidth;
    
        //Duplicate content
        let clone = content.cloneNode(true);
        container.appendChild(clone);
    
        let progress = 1;
        function loop(){
          if (mouseEntered === false) {progress = progress-speed;}
          if (progress <= elWidth*-1) {progress=0;}
          container.style.transform = 'translateX(' + progress + 'px)';
          window.requestAnimationFrame(loop);
        }
        loop();
      });
    
      function handleSpeedClear(){
        speed = 4;
      }
    };
    
    handleMarquee();
    
    
    </script>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

htmljquerymarqueemarquee