SlideShow Function

Question

I have a slide show function that is simply changing the background to seven different images.

I've got a variable limit and start index.

It is working fine, but the problem is that I need to call this function all time (often?) and when the index is equal to limit the function stops working. How can I reset the index?

function:

(function indexSlideShow(index) 
{
    var $limit = 7;
    setTimeout(function() 
    {
        $('#eventDetails').fadeTo(800, 1, function()
        {
            $('#eventDetails').css(
            {
                "background" : "url(images/indexImgs/bigBg/" + index + ".jpg) no-repeat",
                "background-position" : "cover"
            })
        }).fadeTo(800, 1);
    }, 4000);

    index++;

    if (index <= $limit-1) 
    {
        setTimeout(function()
        {
            indexSlideShow(index)
        },4000)
    };
})(1); 

Answer 1

here is solution of this . may be for some one it be useful

    /* index slide show function */
    (function indexSlideShow(index) {

        var $limit = 7;

            setTimeout(function() {

            $('#eventDetails').fadeTo(800, 1, function(){

            $('#eventDetails').css({

                "background" : "url(images/indexImgs/bigBg/" + index + ".jpg) no-repeat",
                "background-position" : "cover"
            })

            }).fadeTo(800, 1);

        }, 4000);

        index++;         

        if (index == $limit) {

            setTimeout(function(){

                 indexSlideShow(0);

            },4000);

        } else  if (index < $limit) {

            setTimeout(function(){

                indexSlideShow(index);

            },4000);
        }  

    })(1);//end index slide show function

Answer 2

You could say that if the limit is reached, the index should be reset before your if (index <= $limit-1) {} statement. Like so:

if (index == $limit-1) {
    index = 0;
} 

setTimeout(function()
    {
        indexSlideShow(index)
    },4000)
};