How to Create a Logo Ticker with HTML and JavaScript?

Estimated read time 1 min read

You can create a logo ticker with HTML and JavaScript by using JavaScript to manipulate the position of the logos within a container element.

Here’s a basic example:

<div id="logo-ticker">
  <img src="logo1.png" alt="Logo 1">
  <img src="logo2.png" alt="Logo 2">
  <img src="logo3.png" alt="Logo 3">
</div>

<style>
  #logo-ticker {
    overflow: hidden;
    width: 500px;
    height: 100px;
  }

  #logo-ticker img {
    float: left;
  }
</style>

<script>
  let ticker = document.getElementById('logo-ticker');
  let logos = ticker.getElementsByTagName('img');
  let current = 0;

  setInterval(function() {
    logos[current].style.display = 'none';
    current = (current + 1) % logos.length;
    logos[current].style.display = 'block';
  }, 1000);
</script>

In this example, the setInterval function is used to repeatedly change the display property of the logos, causing them to appear to “scroll” from right to left within the container element. The interval time of 1000 milliseconds (1 second) can be adjusted as desired to control the speed of the ticker.

You May Also Like

More From Author

+ There are no comments

Add yours

Leave a Reply