Question

`

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <style>
body,
html {
  margin: 0;
  padding: 0;
  
}

ul {
  list-style: none;
}


#wrapper {
  z-index: 1000;

  overflow: hidden;
  overflow-x: hidden;
  overflow-y: hidden;
  position: fixed;
  height: 100%;  
  width: 100%;
}
.box {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  } 
 
  </style>
</head>
<body>
  <div id="wrapper">
    <div class="box">
      <div class="loop_js" id="loop_js" style="transform: translate(0%, 0%);">
        <ul>
          <li><a href="#"><img src="[![image1][1]][1]" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image2][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image3][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image4][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image1][1]][1]" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image2][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image3][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image4][1]][1]" alt="" height="200px" width="200px"></a></li>
        </ul>
      </div>
      <div class="loop_js2" id="loop_js2" style="transform: translate(0%,10%);">
        <ul>
          <li><a href="#"><img src="[![image1][1]][1]" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image2][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image3][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image4][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image1][1]][1]" alt=""height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image2][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image3][1]][1]" alt="" height="200px" width="200px"></a></li>
          <li><a href="#"><img src="[![image4][1]][1]" alt="" height="200px" width="200px"></a></li>
         
        </ul>
      </div>

    </div>
  </div> 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
  <script>
$(function () {
  const loop = document.getElementById('loop_js');
  
  const loopAnim = new TimelineMax({
    repeat: -1 
  });

  let loopItem = (window.innerWidth, loop.children[0]);
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));
  loop.appendChild(loopItem.cloneNode(true));

  loopAnim
    .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
    .to(loop, 0, { ease: Power0.easeNone, y: 0 });

  var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
      $(document).on(mousewheelevent,function(e){
          e.preventDefault();
          var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
          if (delta < 0){
              loopAnim.time(loopAnim.time()+1);
          } else {
            loopAnim.time(loopAnim.time()-1);
          }
      });
});


$(function () {
    const loop = document.getElementById('loop_js2');
    
    const loopAnim = new TimelineMax({
      repeat: -1 
    });

    let loopItem = (window.innerWidth, loop.children[0]);
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));
    loop.appendChild(loopItem.cloneNode(true));

    
    loopAnim
      .to(loop, 30, { ease: Power0.easeNone, yPercent: -66.66666 })
      .to(loop, 0, { ease: Power0.easeNone, y: 0 });

      

    var mousewheelevent = 'onwheel' in document ? 'wheel' : 'onmousewheel' in document ? 'mousewheel' : 'DOMMouseScroll';
        $(document).on(mousewheelevent,function(e){
            e.preventDefault();
            var delta = e.originalEvent.deltaY ? -(e.originalEvent.deltaY) : e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : -(e.originalEvent.detail);
            if (delta < 0){
                loopAnim.time(loopAnim.time()+1);
            } else {
              loopAnim.time(loopAnim.time()-1);
            }
        });
});


  </script>
</body>
</html>

我制作了垂直无限循环滑块。

在左侧，我做到了，但我想使滑块像右边一样从下面升起。

然后在左侧是无限的，但在右侧是无限循环在途中停止。

所以我想像下面的滑块一样从下方制作垂直无限循环滑块。

请帮助我

Tweenmax上的垂直无限循环滑块

0 个答案: