html - JQueryを使用した水平スクロール画像の実装

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値を変更する必要があると思いますが、その方法がわかりません。

よろしくお願いします。

何をしようとしているのかよくわかりませんが、おそらくこのアイデアが何らかの形で役立つでしょう。

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

2

ご返信いただきありがとうございます。無限ループで画像を左に水平にスクロールする必要があります。コードは左にスクロールしますが、j の値が再び 0 に初期化されるため、ul 全体が右にスクロールし、その後再び左にスクロールします。

2020 年 9 月 3 日 12:24

どんなアイデアでも構いません...方法jQuery を使用して左スクロール画像を実装できますか?

2020 年 9 月 4 日 21:03