Simple Image slider - no jump back

Simple Image slider - no jump back

I have a very simple jquery slider that I made. Here is the code:
  1. var $distLeft = -764
  2. var $speedSlide = 800
  3. i=0
  4. $('.sp_box_content .galleryimg8').attr('src',$('.gallerybox8 a').attr('id'));
  5. if($.trim($('.gallerybox8').html()) != "") {max_sp_boxes = 8}
  6. galleryautoscroll();setInterval(galleryautoscroll,3500);
  7. function galleryautoscroll(){
  8. if(i==0){
  9. i=0
  10. $(".sp_box_list").animate({"margin-left":$distLeft*i},$speedSlide);
  11. i++
  12. }
  13. else {
  14. if (i==max_sp_boxes){
  15. i=0
  16. $(".sp_box_list").animate({"margin-left":$distLeft*i},$speedSlide);
  17. }
  18. $(".sp_box_list").animate({"margin-left":$distLeft*i},$speedSlide);
  19. i++
  20. }
  1. <div class="sp_box_content">
  2. <ul class="sp_box_list">
  3. <li><img class="galleryimg1" src="" /></li>
  4.      <li><img class="galleryimg2" src="" /></li>
  5.      <li><img class="galleryimg3" src="" /></li>
  6.      <li><img class="galleryimg4" src="" /></li>
  7.      <li><img class="galleryimg5" src="" /></li>
  8.      <li><img class="galleryimg6" src="" /></li>
  9.      <li><img class="galleryimg7" src="" /></li>
  10.      <li><img class="galleryimg8" src="" /></li>
  11.     </ul>
  12. </div>
I have a list of images. This javascript grabs the info that is displayed in a tag on the html. Then displays those images in the html. What I want is for at the end of the images to not have them jump back to the beginning, I want a never ending loop of the pictures. How do I do that?
I am also curious as to how I can randomize the order of the images.