Header Animation in SharePoint

  <style> 
  ul.ppt {
            position: relative;
            list-style-type: none;
            z-index:1;
            padding:0px!important;
            margin:0px!important;
           /*float:right;*/
           }

 .ppt li {
          /*list-style-type: none;*/
          position: absolute;
          top: 0;
          left: 0;
          text-decoration:none;
          padding:0px!important;
          margin:0px!important;
        }

 .ppt img {
           /*border: 1px solid #e7e7e7;
           padding: 5px;
           background-color: transparent;*/
           background: transparent;
           -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,
           endColorstr=#00FFFFFF)"; /* IE8 */
           filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,
           endColorstr=#00FFFFFF);   /* IE6 & 7 */
           zoom: 1;

         }
 </style>

 <div style="height:245px; width:100%;">
  <ul class="ppt" >
  <li style="left: 0; top: 0">
  <img src="/Banner images/one.png" alt="First Image"></img></li>
  <li><img src="/Banner images/two.png" alt="Second Image"></img></li>
  <li><img src="/Banner images/three.png" alt="Third Image"></img></li>
  <li><img src="/Banner images/four.png" alt="Four Image"></img></li>
  <!--<li><img src="/SiteAssets/HomePageImages/slide4.jpg" alt="fourth Image"></img></li>-->
  </ul>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
 </script>
 <script type="text/javascript">
 $('.ppt li:gt(0)').hide();
 $('.ppt li:last').addClass('last');
 var cur = $('.ppt li:first');
 function animate() {
 cur.fadeOut( 1000 );
 if ( cur.attr('class') == 'last' )
 cur = $('.ppt li:first');
 else
 cur = cur.next();
 cur.fadeIn( 1000 );
 } 

 $(function() {
 setInterval( "animate()", 8000 );
 } );
 </script>

 </div>