How to create jQuery slider slider

Question

I have the following code for the slider, and it works fine, but the slider stops after passing the images to the last. I want to make this slider loop endlessly. The code:

     <script type="text/javascript">
        $(function() {

      setInterval("rotateImages()", 3000);
        });

    function rotateImages() {
        var oCurPhoto = $('#chica div.current');
        var oNxtPhoto = oCurPhoto.next();
        if (oNxtPhoto.lenght == 0)
            onNxtPhoto = $('#chica div.first');

        oCurPhoto.removeClass('current').addClass('previous');
        oNxtPhoto.css({opacity:0.0}).addClass('current').animate({opacity:1.0},2000,
        function() {
            oCurPhoto.removeClass('prevous');
            });
        $('#images').animate({"left": "=0"}, 1000);
       }
       </script>

HTML:

      <div class="current">
     <a href="#"><img src="galeria_1.jpg" 
     alt="Galeria de Imagenes" width="960" height="310" class="galeria" /></a>
     </div>
     <div>
     <a href="#"><img src="galeria_1.jpg" alt="Galeria de Imagenes"               
     width="960" height="310" class="galeria" /></a>
     </div>

Here is the css:

   #chica div {
   position: absolute;
   z-index: 0;
  }

   #chica div.previous  {
   z-index: 1;
  }

   #chica div.current  {
   z-index: 2;
  }

If this helps here link to the site http://negociosensanjuan.com/w/Bufetes/ "

What do I need to add to jquery code to make it a loop?

Answer 1

Loop and ... Pause on pair ?;)

jsBin demo

<div id="gallery">      
    <div><a href="#"><img src="image1.jpg" alt=""></a></div>
    <div><a href="#"><img src="image2.jpg" alt=""></a></div>        
</div>

CSS

#gallery img{ position:absolute; width:960px; height:310px; }

JQ:

var cur = 0,    // Start Slide Index. We'll use ++cur to increment index
    pau = 2000,            // Pause Time (ms)
    fad = 500,             // Fade Time (ms)
    $ga = $('#gallery'),   // Cache Gallery Element
    $sl = $('> div', $ga), // Cache Slides Elements
    tot = $sl.length,      // We'll use cur%tot to reset to first slide
    itv ;                  // Used to clear on mouseenter

$sl.hide().eq( cur ).show(); // Hide all Slides but desired one

function stopFn() { clearInterval(itv); }
function loopFn() { itv = setInterval(fadeFn, pau); }
function fadeFn() { $sl.fadeOut(fad).eq(++cur%tot).stop().fadeIn(fad); }
$ga.hover( stopFn, loopFn );

loopFn(); // Finally, Start