Question

I was writing a slideshow using jQuery a couple weeks back and was wondering about my implementation. I wrote the slideshow to continuously fade images in and out, but the way I programmed it, the function recursion would never stop. I was wondering if there was a better way to do this. When I inspect the images while the slideshow is running, nothing is building up in the in my div tag, but could there be something bad going on here that I do not know about.
Here is my code:

        var arr = new Array(3);
        arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg';
        arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg';
        arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg';
        runSlide(0);
        //The main function that runs the slide show recursively
        function runSlide(t)
        {
            $('<img src="' + arr[t] + '" class="pic" id="photo' + t + '">').appendTo('#slide').hide();  
            $('#photo' + t).fadeIn(300).delay(7000).fadeOut(500, function() {   
                if(t == (arr.length - 1)) {
                    t = 0;
                } else {
                    t++;
                }
                $('.pic').remove();
                runSlide(t);
            }); 
        }  
       <div id="slide"></div>

Thanks Scientific

Answer 1

You can create the image element in the html and switch out the source. This will reduce manipulation of the DOM.

var arr = new Array(3);
        arr[0] = 'http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg';
        arr[1] = 'http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg';
        arr[2] = 'http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg';

        //The main function that runs the slide show recursively

var $img = $('#img');

runSlide(0);
        //The main function that runs the slide show recursively
        function runSlide(t)
        {
            $img.attr('src',arr[t]).fadeIn(300).delay(7000).fadeOut(500, function() {   
                if(t == (arr.length - 1)) {
                    t = 0;
                } else {
                    t++;
                }
                $('.pic').remove();
                runSlide(t);
            });
        }