html新闻列表每天滚动代码

对于那些需要展示新闻的网站，一份动态的新闻列表是非常实用的。在这篇文章里，我们将介绍如何使用HTML代码创建一个每天滚动的新闻列表。

<div id="news" class="news">
  <ul>
    <li><a href="#">新闻1</a></li>
    <li><a href="#">新闻2</a></li>
    <li><a href="#">新闻3</a></li>
  </ul>
</div>

<script>
  function scrollNews() {
    var newsList = document.getElementById("news").getElementsByTagName("ul")[0];
    var newsItem = newsList.getElementsByTagName("li");
    var firstItem = newsItem[0];
    var lastItem = newsItem[newsItem.length-1];
    var height = lastItem.offsetHeight;
    var top = parseInt(newsList.style.top, 10);

    if (top < -height) {
      newsList.style.top = "0px";
    } else {
      newsList.style.top = (top - 1) + "px";
    }
  }

  setInterval(scrollNews, 50);
</script>

首先，我们创建了一个名为“news”的div元素，其中包含了一个无序列表（ul）和3个列表项（li）。每个列表项内部包含一个超链接（a），用于指向新闻文章的详情页面。

接下来，我们编写了名为“scrollNews”的JavaScript函数。该函数通过每50毫秒就调用一次来执行新闻列表的滚动，从而模拟每天更新的效果。在函数内部，我们首先获取了新闻列表（ul）和列表项（li）的引用。然后，我们记录了最顶部的列表项（firstItem）和最底部的列表项（lastItem）的高度（height）以及新闻列表div元素的当前位置（top）。

如果新闻列表已经滚动到了底部，我们就将新闻列表的位置重置到顶部（0px），否则就继续向上滚动1个像素。最后，我们使用setInterval函数来每50毫秒执行一次scrollNews函数。

通过以上的HTML和JavaScript代码，我们可以轻松地创建一个可滚动的每日新闻列表，使您的网站内容更加动态和有趣！