first open your php editor and make a new php file now add the css style and save it as SlideShow.php
<style>
body {font-family:Arial, Helvetica, sans-serif; font-size:12px;}
.fadein {
position:relative; height:332px; width:500px; margin:0 auto;
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjO7zL70OEfIQbXRW4htlKwLn5KoSVPwFTJoary6_ohclqNV5ypd4dVuvIogD8e7WY5WEmfHVKSAPGEW6ffB31dr2sGfk5tHvB5XxUz8uaS43t6WEMO8uSMhEZ8Qdhh8D5Z2kfTBLoKx3Yl/h120/SlideShowBackground.png") repeat-x scroll left top transparent;
padding: 10px;
}
.fadein img { position:absolute; left:10px; top:10px; }
</style>
you can edit the css i mean if you want to change the font or the background you can just change it :)
now its time to create our jquery
add this code below the css style in SlideShow.php
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function(){
$('.fadein img:gt(0)').hide();
setInterval(function(){$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');}, 3000);
});
</script>
now add the code after the script tag
in SlideShow.php
<div class="fadein">
<img src="image1.png" />
<img src="image2.png" />
<img src="image3.png" />
<img src="image4.png" />
<img src="image5.png" />
</div>
replace image.png , image2.png , image3.png , image4.png , image5.png with your images
you can also do the same thing with html
if you have any question comment