Scrolling news html code

Here is an example of HTML code for a scrolling news ticker:

<!-- The container for the scrolling news ticker -->
<div id="news-ticker" style="width: 500px; height: 30px; overflow: hidden; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; font-size: 14px; font-family: Arial, sans-serif;">

  <!-- The news items will be inserted here -->
  <ul id="news-items" style="list-style: none; margin: 0; padding: 0;">

  </ul>

  <!-- The script that will animate the scrolling -->
  <script>
    var newsItems = document.getElementById("news-items");
    var newsTicker = setInterval(function() {
      newsItems.appendChild(newsItems.children[0]);
      newsItems.removeChild(newsItems.children[0]);
    }, 5000); // scroll every 5 seconds
  </script>

</div>

And here is an example of how you could add news items to the ticker using JavaScript:

// Add a new news item to the ticker
function addNewsItem(text) {
  var newsItem = document.createElement("li");
  newsItem.textContent = text;
  newsItem.style.color = "#000";
  newsItem.style.fontSize = "14px";
  newsItem.style.padding = "5px";
  newsItems.appendChild(newsItem);
}

// Add some sample news items
addNewsItem("Breaking News: World Leaders Meet to Discuss Global Issues");
addNewsItem("New Study Reveals Surprising Benefits of Meditation");
addNewsItem("Local Weather Forecast: Sunny Skies Expected Today");

You can customize the appearance and behavior of the scrolling news ticker by modifying the CSS styles and JavaScript code. For example, you could change the font, color, and size of the text, or adjust the speed and animation of the scrolling.

Here is a more advanced example that includes a button to pause and resume the scrolling:

<!-- The container for the scrolling news ticker -->
<div id="news-ticker" style="width: 500px; height: 30px; overflow: hidden; background-color: #f0f0f0; padding: 10px; border: 1px solid #ccc; font-size: 14px; font-family: Arial, sans-serif;">

  <!-- The news items will be inserted here -->
  <ul id="news-items" style="list-style: none; margin: 0; padding: 0;">

  </ul>

  <!-- The button to pause and resume the scrolling -->
  <button id="pause-button" style="position: absolute; top: 0; right: 0; background-color: #ccc; border: none; padding: 5px; font-size: 14px;">Pause</button>

  <!-- The script that will animate the scrolling -->
  <script>
    var newsItems = document.getElementById("news-items");
    var newsTicker = setInterval(function() {
      newsItems.appendChild(newsItems.children[0]);
      newsItems.removeChild(newsItems.children[0]);
    }, 5000); // scroll every 5 seconds

    // Add a click event listener to the pause button
    document.getElementById("pause-button").addEventListener("click", function() {
      if (newsTicker) {
        clearInterval(newsTicker);
        newsTicker = null;
        document.getElementById("pause-button").textContent = "Resume";
      } else {
        newsTicker = setInterval(function() {
          newsItems.appendChild(newsItems.children[0]);
          newsItems.removeChild(newsItems.children[0]);
        }, 5000);
        document.getElementById("pause-button").textContent = "Pause";
      }
    });
  </script>

</div>