how do i reset the position of a slideshow

how do i reset the position of a slideshow

I have made this basic slideshow using jQuery, basically it loops through well but! when it gets to the end of the animation it continues moving leaving a blank space. I have integrated the slideshow with a database so I don't know how many entries there will be. The jQuery code is beneath it...


  1. <div style="width:780px; height:60px; position:relative; overflow:hidden">
    <div id="captions" style="position:absolute;"><!-- move this +- 780px on click next previous-->
       
          <?php  $lastposts = get_posts('numberposts=100&category=17&order=ASC');?>
          <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
          <?php  foreach($lastposts as $post) :
                    setup_postdata($post);?>
    <?php global $n;
    if ($n==0){
    echo '<div style="position: absolute; left:0; display: block; height:auto; width:780px;" class="0">';
     $n++;
     } else {
    $pos = $n * 780;?>
     <div style="position: absolute; left:<?php echo $pos; ?>px; display: block; height:auto; width:780px;" class="<?php echo $n ?>">
      <?php $n++;
     } ?>
    <h3 class="entrytitle blue" id="post-<?php the_ID(); ?>">
    <?php the_tags(''); ?>
    </h3>
    <!--code to get the number of each post to display-->
    <div id="numberofposts" style="display:block; position:absolute; top:41px; left:10px;">
    <?php if($n<10)
     $number = "0$n"; // add the zero
     else
     $number = "$n"; // don't add the zero
     echo '<p>'.$number.'</p>'; ?>
     </div>
     <?php $count_posts = wp_count_posts(); ?>
     <?php $published_posts = $count_posts->publish;?>
     <?php $numPostsNew = get_category_by_slug('news')->category_count; ?>
     <div id="totalposts" style="display:block; position:absolute; top:41px; left:30px;">
     <?php // $totalposts = $published_posts - $numPostsNew; echo $totalposts;?>
     <p>
     <?php  $totalposts = get_category_by_slug('home')->category_count;
     if($totalposts<10)
     $num = "0$totalposts"; // add the zero
     else
    $num = "$totalposts"; // don't add the zero
    echo $num;?>       






































  2. <?php $reset1 = $n; ?> <?php $reset2 = $totalposts;?>
    <?php if ($reset1 == $reset2){?><!-- if the animation reaches the end-->
    <?php echo "matching values"; ?> <!--let me know -->
    <?php } else { } ?>




  3. </p>
    </div>
    </div>
    <?php endforeach; ?>
    <?php endwhile; ?>
    </div><!--end captions-->
    </div><!--end container caption div-->






  4.   <script type="text/javascript" charset="utf-8">

        $('.next').click(function(){
            $('#captions').animate({"left": "-=780px"}, 1);
        });



  5. $('.previous').click(function(){
            $('#captions').animate({"left": "+=780px"}, 1);
        });

  6. </script>
I could really use some help, I don't understand what I'm doing wrong. The if statement does echo out matching values when the animation reaches the end, but I can do nothing else.