How to write a simple marquee effect with javascript-CodePudding

I need everyone's help. I currently need to implement a marquee effect. The yellow box needs to be scrolled up to show the name. Every time I scroll, I have to stay in the middle of the box for 1 second before continuing to scroll. I can find such an example on the Internet. , but the logic of this program is a bit difficult for me to understand for urban beginners. I wonder if anyone would like to provide a simpler and easier-to-understand writing method if I want to achieve this marquee effect?

Sorry, I am a beginner in the program, the current logic More complex programs are more difficult to understand.

function slideLine(box, stf, delay, speed, h) {
  var slideBox = document.getElementById(box);
  var delay = delay || 1000,
    speed = speed || 20,
    h = h || 40;
  var tid = null,
    pause = false;
  var s = function() {
    tid = setInterval(slide, speed);
  };
  var slide = function() {
    if (pause) return;
    slideBox.scrollTop  = 1;
    if (slideBox.scrollTop % h == 0) {
      clearInterval(tid);
      slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]);
      slideBox.scrollTop = 0;
      setTimeout(s, delay);
    }
  };
  setTimeout(s, delay);
}
slideLine("kanban_info", "p", 1000, 25, 40);

.kanban {
  position: absolute;
  margin: 0 auto;
  width: 278px;
  height: 50px;
  background-color: yellow;
  left: 50%;
  transform: translate(-50%);
  text-align: center;
  line-height: 6;
}

.kanban .kenban_wrap {
  height: 38px;
  transform: translateY(28px);
  overflow: hidden;
}

.kanban .kenban_wrap .kanban_info {
  line-height: 38px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div  id='kanban_info'>
    <p >Allen</p>
    <p >james</p>
    <p >jack</p>
  </div>
</div>

CodePudding user response：

By combining scroll-behavior with anchor tags that are programmatically clicked you can simplify it. This should be easier to understand and you can go from there, even if it might not be the best solution.

let links = document.querySelectorAll("a"); // List of links
let div = document.querySelector("div");
let index = 0;
let t = 2000; // setTimeout duration

// Change Scroll behavior to prevent the animation from the last to first list item
function scrollBeh() {
  if(index == 1) {
    div.style.scrollBehavior = "auto";
    t = 0;  // Timeout duration to 0 to prevent `1` being shown longer than other list items
  } else {
    div.style.scrollBehavior = "smooth";
    t = 2000;
  }
}

// Loop through list items
function resetInd() {
    if(index < 3) {
    index  ;    
  } else {
    index = 0;
  }
}

function clickLinks() {
  links[index].click();
  resetInd();
  scrollBeh();
  setTimeout(clickLinks, t);
}

setTimeout(clickLinks, t);

div {
  width: 200px;
  height: 100px;
  background-color: darkblue;
  overflow: hidden;
  scroll-behavior: smooth;
}

li {
  height: 100px;
  list-style: none;
}

a {
  text-decoration: none;
  color: #FFF;
  font-size: 50px;
}

<div>
  <ul>
    <li id="one"><a href="#one">1</a></li>
    <li id="two"><a href="#two">2</a></li>
    <li id="three"><a href="#three">3</a></li>
    <li id="one_loop"><a href="#one_loop">1</a></li>
  </ul>
</div>