首页html列表定时滚动例子

html列表定时滚动例子

时间: 2023-05-30 17:05:19 浏览: 200

以下是一个简单的HTML列表定时滚动的例子： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>列表定时滚动例子</title> <style> ul { list-style: none; padding: 0; margin: 0; height: 100px; overflow: hidden; background-color: #f2f2f2; } li { padding: 10px; border-bottom: 1px solid #ccc; } </style> </head> <body> <ul id="myList"> <li>第一条消息</li> <li>第二条消息</li> <li>第三条消息</li> <li>第四条消息</li> <li>第五条消息</li> <li>第六条消息</li> <li>第七条消息</li> <li>第八条消息</li> <li>第九条消息</li> <li>第十条消息</li> </ul> <script> var index = 0; var list = document.getElementById("myList"); var items = list.getElementsByTagName("li"); var timer = setInterval(function() { items[index].style.display = "none"; index++; if (index == items.length) { index = 0; } items[index].style.display = "block"; }, 2000); </script> </body> </html> ``` 这个例子包含一个`<ul>`列表和一些`<li>`列表项。我们首先对`<ul>`应用了一些CSS样式，使其具有固定高度和隐藏溢出内容的属性。然后，我们使用JavaScript定时器来逐个显示列表项，并将前一个列表项隐藏。在这个例子中，我们将定时器设置为每隔2秒钟执行一次。请注意，我们在JavaScript代码中使用了`setInterval()`函数来创建一个定时器，并将其赋值给变量`timer`。我们还使用`getElementById()`和`getElementsByTagName()`函数来获取列表和列表项的引用，以便我们可以操作它们的样式。这个例子只是一个简单的示例，你可以根据实际需要进行修改和扩展。

阅读全文