<script type="text/javascript" src="js/create.js"></script>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.74.js"></script>

<!--  initialize the slideshow when the DOM is ready -->
<script type="text/javascript">
$(document).ready(function() {
    $('.s4').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:  1500,
    timeout:  3500
    });
});
$(document).ready(function() {
    $('.s2').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    speed:  1500,
    timeout:  3500,
    delay: 1750
    });
});
</script>

.s4 {
    float: left;
    height: 310px;
    width: 220px;
    display: block;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #FFFFFF;
    margin-top: 5px;
    margin-left: 5px;
    background-image: url(../img/slideshowback.jpg);
    border: 1px solid #FFFFFF;
}
.s4 img {
    height: 300px;
    width: 200px;
    position: fixed;
    padding-top: 5px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-left: 10px;
}

<div class="s4">
        <img src="http://estepphotography.com/jsimgs/ss/s3.jpg" width="200" height="300" />
        <img src="http://estepphotography.com/jsimgs/ss/s4.jpg" width="200" height="300" />
        <img src="http://estepphotography.com/jsimgs/ss/s5.jpg" width="200" height="300" />
        <img src="http://estepphotography.com/jsimgs/ss/s1.jpg" width="200" height="300" />
        <img src="http://estepphotography.com/jsimgs/ss/s2.jpg" width="200" height="300" />
  </div>