首页用HTML，js，css做一个滚动列表

用HTML，js，css做一个滚动列表

时间: 2023-11-25 19:45:47 浏览: 123

要创建一个滚动列表，你可以使用HTML、CSS和JavaScript来实现。以下是一个简单的示例： ```html <!DOCTYPE html> <html> <head> <style> .scroll-list { height: 200px; overflow: auto; border: 1px solid #ccc; padding: 10px; } .scroll-list li { margin-bottom: 10px; padding: 5px; background-color: #f0f0f0; } </style> </head> <body> <div class="scroll-list"> <ul id="list"> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> <li>Item 9</li> <li>Item 10</li> </ul> </div> <script> const list = document.getElementById('list'); let items = list.getElementsByTagName('li'); function scrollList() { if (list.scrollTop + list.clientHeight >= list.scrollHeight) { list.scrollTop = 0; } else { list.scrollTop += 1; } } setInterval(scrollList, 50); </script> </body> </html> ``` 在这个示例中，我们创建了一个带有固定高度和边框的 `<div>` 元素，并将其 `overflow` 属性设置为 `auto`，以便在内容溢出时显示滚动条。我们还创建了一个 `<ul>` 元素，并在其中添加了一些 `<li>` 元素作为列表项。通过为 `<div>` 元素添加样式，我们定义了滚动列表的外观。通过使用 JavaScript，我们在每50毫秒内设置一个定时器来滚动列表。当滚动条到达底部时，它会返回到顶部，并不断地循环滚动。将上述代码保存为HTML文件并在浏览器中打开，你将看到一个带有滚动条的列表。列表中的项将以一定的速度自动滚动。你可以根据需要进行样式和布局的调整，以及更改滚动速度和列表内容。

阅读全文