help with rotating header

I want to add some JQuery rotating header functionality to the child theme I created from the twentyten parent theme. I did some google searching and came up with adding this to functions.php to link to JQuery.

[code]
<?php
function my_scripts_method() {
wp_deregister_script( 'jquery' );
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js');
wp_enqueue_script( 'jquery' );
}

add_action('wp_enqueue_scripts', 'my_scripts_method');
?>
[/code]

and this to the header.php above wp_head();

[code]
<?php wp_enqueue_script('jquery'); ?>
<script type="text/javascript">
counter = 1;
num_images = 2; // Enter the number of images to rotate
dir = "<?php bloginfo('template_url'); ?>/images/headers"; // This is where your images are stored

function rotateHeader() {

var header_img = '(' + dir + '/header_' + counter + '.png)'; // jpg, png, or gif

jQuery('header').css('background-image', header_img); // .art-Header-jpeg is the div you want to replace
counter++; if (counter > num_images) counter = 1;
}

</script>
[/code]

also add this to the body tag
[code]
onLoad="javascript:setInterval( 'rotateHeader()', 10000 );"
[/code]

and this right after the body tag.

[code]

<div style="width:1px; height:1px; display:none;">
<img src="<?php bloginfo('template_url'); ?>/images/headers/Leaves.png" />
<img src="<?php bloginfo('template_url'); ?>/images/headers/Ocean.png" />

</div>
[/code]

my image directory is correct, but no images are showing up (except the default WP header image attached to this template). What am I doing wrong and how can I fix?