使用 JQuery 实现水平滚动图像

Question

我想使用 JQuery 实现水平滚动图像。基本上我想重复 animate() 无限次。这是我的代码：

HTML：

<div class="testDiv">
    <h1 class="heading">Test Text</h1>
    <ul class="reasons">
        <li class="item">
           <img>
        </li>
        <li class="item">
          <img>
        </li>
        <li class="item">
           <img>
        </li>  
    </ul>       
</div>

JQuery:*

let itemsLength = $('.item').length;

$(document).ready(loop());

函数循环(){

for (i = 1; i <= itemsLength; i++) {
      $('.reasons').animate({"scrollLeft": "+=150px"},"slow", function(){
                    loop();
                          }/*function*/     
                          });/*animate*/
        }/*for*/
    }/*function loop()*/

CSS：

.testDiv {
    margin-top: 2vw;
    overflow-x: hidden;
    overflow-y: hidden;
    z-index: 40;        
}

.reasons {
    height: 200px;
    background: #ffffff;
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: hidden;
    overflow-y: hidden;
}

.item {
    display: inline-block;
    height: 100%;
    box-sizing: border-box;
}

我尝试过使用$('.reasons').append($('.item')[0]);。这只是附加列表项但不滚动。我认为 scrollLeft 值需要更改但不知道如何更改。

提前致谢。

Answer 1

我不太确定，你想做什么，但也许这个想法会以某种方式帮助你：

  function loop(){
    for (i = 1, j=0; i <= itemsLength; i++, j+=150) 
    {
       $('.reasons').animate({"scrollLeft": j},"slow", function(){
                                              
       });
    }
    loop();
  }