I'm trying to build a simple image rotator using an unordered list and a "show" css class which applies a z-index of 1 to the relevant list item.
The images are held in the list items, and the final li item holds the caption. This last item has an id of "caption", and has a z-index of 2, so that's it's visible
I want to skip over this last caption item as it's been caught up in the function and is being animated out of view along with the other items.
$(document).ready(function() {
//Hide all the list items
$('#slideshow li').css({opacity: 0.0});
//Set the first one's opacity to one so we can see it
$('#slideshow li:first').css({opacity: 1.0});
//Set the caption's opacity to one so we can see it
$('#caption').css({opacity: 1.0});
setInterval('slideShow()',3000);
});
function slideShow(){
var current = $('#slideshow li.show');
var next = current.next();
//Move on to the next list item and add "show" class - z-index is 1
next.addClass('show').animate({opacity: 1.0}, 1000);
/*
If the next list item is the caption, add the show class back on to the first list item,
and animate the opacity back up to one.
The problem is however, the caption is being caught in the function and given the show class, which makes it a current list item along with the first list item. As a result it's opacity is being animated down to 0 on the second run through.
What do I need to do here so that it's skipped altogether?
*/
if (next.attr('id') == "caption")
{
$('#slideshow li:first').addClass('show').animate({opacity: 1.0}, 1000);
}
//Animate the current list item's opacity down to 0 and remove the show class
current.animate({opacity: 0.0}, 1000).removeClass('show');
}