jQuery / JavaScript Scope: Getting Variables Into and Out Of Functions
<p>I have a simple image rotator script that I'm trying to build but I am having trouble learning scope as it relates to getting variables into and out of JavaScript functions.</p>

<p>Here is my code:</p>

<pre><code>&lt;script type="text/javascript"&gt;

jQuery(document).ready(function($) {


    function indexUp () {

        if (slide_curr == slide_max - 1) {

            slide_curr = slide_max;
            slide_prev = slide_max - 1;
            slide_next = slide_min;

        } else if (slide_curr == slide_max) {

            slide_curr = slide_min;
            slide_prev = slide_max;
            slide_next = slide_min + 1;

        } else {

            slide_curr = slide_next;
            slide_prev = slide_curr - 1;
            slide_next = slide_curr + 1;

        }

    }

    function doTransition () {

        // turn on the display of the next slide
        $(slides[slide_next]).css('display','block');
        // fade the current slide out (to zero opacity)
        $(slides[slide_curr]).fadeOut(600, function() {});

    }

    function printState () {

        var state_str = 'slide_curr='
            + slide_curr
            + '; slide_prev='
            + slide_prev
            + '; slide_next='
            + slide_next
            + '; slide_max='
            + slide_max
            + '; slide_min='
            + slide_min;
        $('#bx_state').html(state_str);

    }

    function doIt () {

        doTransition();
        indexUp();
        printState();

    }

    // variables
    var slides = $('#bx_slider img');
    var slide_min, slide_max, slide_curr, slide_prev, slide_next;
    // initialize the settings
    slide_min = 0;
    slide_max = slides.length - 1;
    slide_curr = 0;
    slide_prev = slide_max;
    slide_next = 1;

    // start it all off when the page loads
    $(slides[slide_curr]).css('display','block');
    timeout = setTimeout(doIt, 3000);


});

&lt;/script&gt;

&lt;style type='text/css'&gt;
    #bx_slider img {
            display:none; position:absolute;}
    #bx_slider {
            width:922px; height:530px; margin:100px auto;
            position:relative;}
&lt;/style&gt;

&lt;div id="bx_slider"&gt;
    &lt;img src="slide1.jpg" /&gt;
    &lt;img src="slide2.jpg" /&gt;
    &lt;img src="slide3.jpg" /&gt;
    &lt;img src="slide4.jpg" /&gt;
    &lt;img src="slide5.jpg" /&gt;
&lt;/div&gt;&lt;!-- #bx_slider --&gt;

&lt;div id='bx_state'&gt;&lt;/div&gt;
</code></pre>

<p>I'm trying to get the slide_curr, slide_next, and slide_prev to change each time the script is run and then print those out to the page in the div tag in an effort to see what is going on; however, even that is not working for me.</p>

<p>Here is the script in action: <a href="http://www.exit44.com/slider/" rel="nofollow">http://www.exit44.com/slider/</a></p>

<p>Thanks for the help.</p>
