Question

我有一个简单的图像旋转器脚本，我正在尝试构建但是我在学习范围时遇到了麻烦，因为它涉及到变换进出JavaScript函数。

这是我的代码：

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

我正在尝试让slide_curr，slide_next和slide_prev在每次运行脚本时更改，然后将这些内容打印到div标签中的页面，以查看正在发生的事情;然而，即使这对我不起作用。

以下是操作中的脚本：http://www.exit44.com/slider/

感谢您的帮助。

Answer 1

我猜这里，但也许这个问题与变量范围无关。你提到你想要创建一个“简单的图像旋转器”。尝试更改

timeout = setTimeout(doIt, 3000);

到

timeout = setInterval(doIt, 3000);

jQuery / JavaScript范围：获取函数的变量

1 个答案: