Copy and Paste below code in SharePoint banner section and change images URL :
<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>