I have create a slide show that has next and previous buttons and an
area of 'dots' that link to a specific slide, however I'm having
difficulty in looping the sideshow so it runs automatically.

Ive tried making a loop function but it seems to act strangely.

I'm pretty new to jquery and would really appreciate some help.

Code:

$(document).ready(function(){

      //global fade time
      var fadetime = 500;

      //global amout of slides
      var current = 0;
      var amountOfSlides = $("#slideshow > .slide").size();

      //create links for each slide in the dot area
      var theDots = "";
      var dotCounter = 0;
      var firstDot = ' class="current" ';
      $(".slide").each(function(){
         theDots = theDots + '<a href="" name="'+ dotCounter +'" ' +
firstDot +' ></a> ';
         firstDot = "";
         dotCounter++;
      });
      $("#dot-area").html(theDots);


      //next button
      $("#next").live("click", function(e){
         e.preventDefault();

         //make current selector
         var currentSelector = ".slide:eq(" + current + ")";
         var currentDotSelector = "#dot-area a:eq(" + current + ")";
         current = parseInt(current);
         current = current + 1;
         if(current == amountOfSlides){
            current = 0;
         }
         //make next selector
         var nextSelector = ".slide:eq(" + current + ")";
         var nextDotSelector = "#dot-area a:eq(" + current + ")";

         //remove .current from dot and add it to new one
         $(currentDotSelector).removeClass("current");
         $(nextDotSelector).addClass("current");

         //fade out current and fadein next
         $(currentSelector).fadeOut(fadetime,function() {
            $(nextSelector).fadeIn(fadetime);
         });
      });

      //previous button
      $("#previous").live("click", function(e){
         e.preventDefault();

         //make current selector
         var currentSelector = ".slide:eq(" + current + ")";
         var currentDotSelector = "#dot-area a:eq(" + current + ")";
         current = current - 1;
         if(current < 0){
            current = (amountOfSlides - 1);
         }
         //make next selector
         var previousSelector = ".slide:eq(" + current + ")";
         var previousDotSelector = "#dot-area a:eq(" + current + ")";

         //remove .current from dot and add it to new one
         $(currentDotSelector).removeClass("current");
         $(previousDotSelector).addClass("current");

         //fade out current and fadein next
         $(currentSelector).fadeOut(fadetime,function() {
            $(previousSelector).fadeIn(fadetime);
         });
      });

      //dot click
      $("#dot-area a").live("click", function(e){
         e.preventDefault();

         //current selector
         var currentSelector = ".slide:eq(" + current + ")";
         var currentDotSelector = "#dot-area a:eq(" + current + ")";

         //the one to fade to
         current = $(this).attr("name");
         var dotSlide = ".slide:eq(" + current + ")";
         var newDotSelector = "#dot-area a:eq(" + current + ")";


         //remove .current from dot and add it to new one
         $(currentDotSelector).removeClass("current");
         $(newDotSelector).addClass("current");


         $(currentSelector).fadeOut(fadetime,function() {
            $(dotSlide).fadeIn(fadetime);
         });
      });



      //begin loop
      function slideshowLoop(){
         //make current selector
         var currentSelector = ".slide:eq(" + current + ")";
         var currentDotSelector = "#dot-area a:eq(" + current + ")";
         current = parseInt(current);
         current = current + 1;
         if(current == amountOfSlides){
            current = 0;
         }
         //make next selector
         var nextSelector = ".slide:eq(" + current + ")";
         var nextDotSelector = "#dot-area a:eq(" + current + ")";

         //remove .current from dot and add it to new one
         $(currentDotSelector).removeClass("current");
         $(nextDotSelector).addClass("current");

         //fade out current and fadein next
         $(currentSelector).fadeOut(fadetime,function() {
            $(nextSelector).fadeIn(fadetime).fadeTo(3000, 1);
            slideshowLoop()
         });
      }
      slideshowLoop();




});


Any help would be much appreciated. Cheers.

Reply via email to