Блог

Главная - Вопросы по программированию - Как прокрутить до каждого списка опций и вернуться к началу, чтобы начать снова

Как прокрутить до каждого списка опций и вернуться к началу, чтобы начать снова

#javascript #html #jquery #css

#javascript #HTML #jquery #css

Вопрос:

У меня есть список из 5 элементов, и я хочу, чтобы этот список автоматически прокручивался до каждого элемента каждые 3 секунды, а после завершения последнего элемента возвращался к первому элементу и начинал снова. Это мой пример.

 var height = $(".list li:first-child").outerHeight();
    
setInterval(function(){ 

        $('.list').animate({
            scrollTop: 58
        }, 500);



}, 3000);  
 .list{width: 200px;height: 180px;overflow: auto;list-style: none;padding-left: 0px;}
ul.list li{padding:20px 0px;}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="list">

    <li>Option 01</li>
    <li>Option 02</li>
    <li>Option 03</li>
    <li>Option 04</li>
    <li>Option 05</li>

</ul>

Как вы можете видеть, список прокручивается только до второго элемента, а затем останавливается. Как я могу это исправить?

Мне нужна ваша помощь.

Ответ №1:

Проблема с вашим кодом заключается в том, что у вас просто постоянное значение прокрутки 58, из-за чего он просто прокручивается вниз со «значением прокрутки» 58, а затем останавливается.

Что вам нужно сделать, так это сначала прокрутить вниз на 58, подождать 3 секунды, а затем снова прокрутить вниз еще на 58 и так далее, и как только вы достигнете дна, что в вашем случае происходит после 2 прокрутки (что дает общее значение прокрутки 58 58 = 116), вам нужно присвоить значение прокрутки 0, чтобы оно снова прокручивалось вверх.

Следующий код делает это:

 let scrollValue = 0
setInterval(function(){ 
        scrollValue < 116 ? scrollValue  = 58 : scrollValue = 0;
        // console.log(`scrollValue: ${scrollValue}`);
        $('.list').animate({
            scrollTop: scrollValue
        }, 500);



}, 3000);  
 .list{
    width: 200px;
    height: 180px;
    overflow: auto;
    list-style: none;
    padding-left: 0px;
}
ul.list li{
    padding:20px 0px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="list">
  <li>Option 01</li>
  <li>Option 02</li>
  <li>Option 03</li>
  <li>Option 04</li>
  <li>Option 05</li>
</ul>

То, что я здесь сделал, определяется переменной scrollValue , которая определяет, на сколько прокручивать вниз. Изначально значение равно 0, и каждый раз, когда вызывается функция для анимации, оно увеличивается на 58, и если это значение достигает 116 (поскольку вам приходится дважды прокручивать вниз), scrollValue становится 0, так что вы прокручиваете вас обратно вверх.

Ответ №2:

Чтобы сделать это, как описано, вам нужно знать, сколько элементов у вас есть, и использовать высоту элемента, который вы уже нашли, но не использовали. Затем вам нужно будет отслеживать текущее количество / шаг и увеличивать его до тех пор, пока оно не станет меньше общей длины элементов, или вернуться к 0, если нет.

Однако существует проблема, из-за которой прокрутка не будет выполняться для любых элементов, которые находятся ближе к низу, поскольку контейнеру некуда прокручивать. Вы могли бы выделить дополнительное пространство для прокрутки, добавив пробел под последним li, как я сделал, но это выглядит немного странно.

 var height = $(".list li:first-child").outerHeight();
// Get the number of items
var itemLength = $(".list li").length
// Set the currentItem to 0
var currentItem = 0
// Set the initial scroll to height so the first interval goes to item[1]
var scroll = height

setInterval(function() {

  $('.list').animate({
    scrollTop: scroll
  }, 500);
  // Increase the step or return to 0 if it's greater than the length of items
  if (currentItem < itemLength - 1) {
    currentItem   
  } else {
    currentItem = 0
  }
  // Set the scroll based on above changes
  scroll = currentItem * height

}, 3000);  
 .list {
  width: 200px;
  height: 180px;
  overflow: auto;
  list-style: none;
  padding-left: 0px;
}

ul.list li {
  padding: 20px 0px;
}
li:last-of-type {
margin-bottom: 150px;
}  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<ul class="list">

  <li>Option 01</li>
  <li>Option 02</li>
  <li>Option 03</li>
  <li>Option 04</li>
  <li>Option 05</li>

</ul>