Necesito la ayuda de todos. Actualmente necesito implementar un efecto de marquesina. El cuadro amarillo debe desplazarse hacia arriba para mostrar el nombre. Cada vez que me desplazo, tengo que permanecer en el medio del cuadro durante 1 segundo antes de continuar desplazándome. Puedo encontrar un ejemplo de este tipo en Internet. , pero la lógica de este programa es un poco difícil de entender para los principiantes urbanos. Me pregunto si a alguien le gustaría proporcionar un método de escritura más simple y fácil de entender si quiero lograr este efecto de marquesina.
Lo siento, soy un principiante en el programa, la lógica actual Los programas más complejos son más difíciles de entender.
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 class="kanban"> <div class="kenban_wrap" id='kanban_info'> <p class="kanban_info">Allen</p> <p class="kanban_info">james</p> <p class="kanban_info">jack</p> </div> </div>Al combinar scroll-behavior con etiquetas de anclaje en las que se hace clic mediante programación, puede simplificarlo. Esto debería ser más fácil de entender y puede continuar desde allí, incluso si no es la mejor solución.
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>