I use the jQuery cycle on the home page of http://getwellgabby.org/. You can inspect the elements to see what’s going on with CSS here.
For the PHP, I wrote a custom home page template as part of a child theme based on TwentyTen. There are two loops in the page: One that gets the static come page content, and another that pulls the latest blog post in “below the fold”.
<?php
$page_id = 5; //Get the content for the "Home" page.
$page_data = get_page( $page_id );
$content = apply_filters('the_content', $page_data->post_content);
?>
<div id="post-<?php echo $page_id; ?>" <?php post_class('', $page_id); ?>>
<div class="entry-content">
<?php
$arrImages =& get_children('order_by=menu_order&order=ASC&post_type=attachment&post_mime_type=image&post_parent=" . $page_id);
if($arrImages): ?>
<script type="text/javascript">
jQuery(function(){
jQuery("#slider').cycle({ fx: 'fade', speed: 3000 });
});
</script>
<div id="slider-wrapper">
<div id="slider">
<!-- To add photos to this page, upload 385 x 265 px images in the WP media manager and attach them to the Home Page -->
<?php
foreach ( $arrImages as $attachment_id => $attachment ) {
echo wp_get_attachment_image( $attachment_id, 'rotator' );
}
?>
</div><!--slider-->
<div id="slider-frame">
<img src="https://wordpress.stackexchange.com/questions/50216/<?php echo get_stylesheet_directory_uri(); ?>/img/photo-frame.png" width="394" height="275" />
</div><!--slider-frame-->
</div><!--slider-wrapper-->
<?php endif; ?>
<?php echo $content; ?>
</div><!--#entry-content-->
</div><!--#post-->
To get the custom sized “rotator” image, I added this code to my theme’s functions.php:
if ( function_exists ( 'add_theme_support') ) {
add_theme_support( 'post-thumbnails' );
add_image_size( 'rotator', 385, 265, true );
}