Split posts in to divs

Does anyone know how I can turn this:

<div id="mySlides">

		<?php query_posts('showposts=4&cat=11'); ?>
		<?php if (have_posts()) : ?>

			<?php while (have_posts()) : the_post(); ?>

			<div>

				<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="< ?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
		<?php the_excerpt(); ?>

			<?php endwhile; ?>
		<?php endif; ?>

	</div>

<div id="myController">
   <span class="jFlowControl">1</span>
   <span class="jFlowControl">2</span>
   <span class="jFlowControl">3</span>
   <span class="jFlowControl">4</span>
</div>

<span class="jFlowPrev">Prev</span>
<span class="jFlowNext">Next</span>

<div class="clear">

Into:

<div id="mySlides">
   <div id="slide1"><img src="images/slide1.jpg" alt="Slide 1 jFlow Plus" />
        <span><h3>Welcome to the First Slide!</h3><p>We hope you enjoy the jFlow Plus Slider - a light-weight slider for your web design needs. <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
   </div>
   <div id="slide2"><img src="images/slide2.jpg" alt="Slide 2 jFlow Plus" />
        <span><h3>Hey you made it to the Second Slide!</h3><p>We Know you enjoy this plugin... it's not too hard to implement, right? <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
   </div>
   <div id="slide3"><img src="images/slide3.jpg" alt="Slide 3 jFlow Plus" />
        <span><h3>Woah You're on the Third Slide</h3><p>You've completed quiet the journey! All the way from slide 1 to slide 3... congratulations! <a href="#" title="Coolness" class="readmore">Read More!</a></p></span>
   </div>
</div>

<div id="myController">
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
   <span class="jFlowControl"></span>
</div>

I feel like I have almost got it working I just don’t know how to how to split the post previews into <div id=”slide1″>,<div id=”slide2″> etc, etc.

Thanks,