Question

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.

Here is my code:

<script type="text/javascript">

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);


});

</script>

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

<div id="bx_slider">
    <img src="slide1.jpg" />
    <img src="slide2.jpg" />
    <img src="slide3.jpg" />
    <img src="slide4.jpg" />
    <img src="slide5.jpg" />
</div><!-- #bx_slider -->

<div id='bx_state'></div>

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.

Here is the script in action: http://www.exit44.com/slider/

Thanks for the help.

Answer 1

I’m guessing here, but perhaps the problem has nothing to do with variable scope. You mention that you want to create a “simple image rotator”. Try changing

timeout = setTimeout(doIt, 3000);

to

timeout = setInterval(doIt, 3000);