Как автоматически прокрутить список переполнения на javascript? - PullRequest
Новая
       26

Как автоматически прокрутить список переполнения на javascript?

0 голосов
/ 15 апреля 2020

Код HTML, приведенный ниже, является списком переполнения веб-страницы.

Мне нужен код javascript, который поможет мне автоматически прокрутить этот список, так как на этом сайте есть список «Новости и события» [http://www.kuet.ac.bd/] [1] , но медленнее. 

<div class="widget-body">
   <nav class="feature-list">
      <span style="" id="ember1083" class="flex-horizontal">
         <div class="flex-fluid list-item-content overflow-hidden ">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>609,685</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">HTML</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1085" class="flex-horizontal">
         <div class="flex-fluid list-item-content overflow-hidden ">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>177,633</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">CSS</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1087" class="flex-horizontal">
         <!----><!---->
         <div class="flex-fluid list-item-content overflow-hidden ">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>162,488</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">JavaScript</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1089" class="flex-horizontal">
         <div class="flex-fluid">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>132,210</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">C++</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1091" class="flex-horizontal">

         <div class="flex-fluid">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>131,362</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">Java</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1093" class="flex-horizontal">

         <div class="flex-fluid list-item-content overflow-hidden ">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>94,847</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">Python</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1095" class="flex-horizontal">

         <div class="flex-fluid">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>83,355</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">jQuery</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1097" class="flex-horizontal">
         <!----><!---->
         <div class="flex-fluid list-item-content overflow-hidden ">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>76,389</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">Ajax</span></h5>
            </div>
         </div>
      </span>
      <span style="" id="ember1099" class="flex-horizontal">
         <!----><!---->
         <div class="flex-fluid">
            <div class="external-html">
               <h5><span style="color:#e60000"><strong>65,111</strong></span><span style="color:#ffffff">&nbsp;</span><span style="color:#d6d6d6">C#</span></h5>
            </div>
         </div>
      </span>
   </nav>
</div>

Я использовал следующий код, который нашел на этом сайте. Я немного изменил его, но он не работает. 

$(function(){
  var listLength = $('.feature-list span').length;
  var listHeight = $('.feature-list span').outerHeight();
  $('.feature-list span:last-child').prependTo('.feature-list');
$('.feature-list').css('marginTop',-listHeight);
  function moveTop(){
    $('.feature-list').animate({
      top : -listHeight
    },600, function(){
     $('.feature-list span:first-child').appendTo('.feature-list');
      $('.feature-list').css('top','');
    });
   }
  setInterval( function(){
    moveTop();
  }, 3000);
  });

Я даже не знаю, какая часть работает для чего здесь. Я новичок в Javascript. Может кто-нибудь помочь мне, как я могу это сделать, пожалуйста ??

Заранее спасибо!

...