Simple slideshow

<!-- CSS to hide all images except the first one, until the script loads.
    Put this in header.php or style.css of your theme  -->
<style type="text/css">
    .slideshow img {
        display: none
    }
    .slideshow img.first {
        display: block
    }
</style>

<!--
This is just a div holding all the images.
You put this in whatever post or page you want.

I use the manual linebreaks to make sure images display one after another in case the script or css breaks -->
<div class="slideshow">
    <img class="first" src="wp-content/uploads/2011Slides/01.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/02.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/03.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/04.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/05.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/06.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/07.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/08.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/09.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/10.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/11.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/12.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/13.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/14.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/15.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/16.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/17.jpg" /><br />
    <img src="wp-content/uploads/2011Slides/18.jpg" />
</div>

<!-- the javascript goes in footer.php, between the <footer> html tags. -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery('.slideshow').cycle({
            fx:     'fade',
            speed:   1000,
            timeout: 5000,
            next:   '.slideshow',  //name of the div holding all images
            pause:   1,
            slideExpr: 'img',
            random: 1
        });
    });
</script>