Ex No: 6 BANNER ADVERRTISEMENT
Aim: To implement banner advertisement that changes images every 10 seconds.
Algorithm
Step1: Create a folder “Ex6” to place the HTML files.
Step2: Create HTML file “index.html”.
Step3: Create a folder "images" and place the banner images.
Step4: Add JavaScript code to change banner image evert 10 seconds.
Source Code

index.html


<!DOCTYPE html>
<html>
  <head>
    <title>Banner Advertisement</title>  
  <style>
    header {
     text-align:center;
     height: auto;
     background-color: olive;
     padding: 10px;
     color: white;
     border-radius: 10px 10px 0px 0px;
     position: relative;    
    }
    header > h1{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
    }
    footer {
     text-align:center;
     font-size: 12px;
     height: 50px;
     line-height: 50px;
     background-color: olive;
     padding: 10px;
     border-radius: 10px;
    }
  </style>
  <script type="text/javascript">
  
    setInterval(bannerTimer,1000);

    var i = 1;
    var path = "images/";
    function bannerTimer()
    {  
      file = path + i +".jpg";
      document.getElementById("banner").src = file;
      if(i>=4)
       i = 1;
      else
       i++  
    }
  </script>
  </head>
  <body>    
    <header>
      <img src="images/4.jpg" id="banner" name="banner" alt="Banner" style="width:100%;"/>        
      <h1>Banner Advertisement</h1>
    </header>  
    <hr>
    <p> This Page displays the use of Banner Advertisement.
    </p>
    <footer>
      Developed by K Anbarasan
    </footer>
  </body>
</html>
Result: Thus a website is created to implement banner advertisement.