[jQuery] How do a create a loop in my slideshow? (pelase help)
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.