jQuery图像旋转器脚本

我正在构建一个简单的jQuery图像旋转器脚本，我被最后一部分卡住了。我希望能够单击脚本顶部的数字，跳转到幻灯片放映中的特定幻灯片。点击似乎注册了正确的幻灯片编号，但该节目没有完成它应该做的事情

代码如下：

<script type="text/javascript">

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


    function reIndex () {

        if (dir == 'prev') {
            if (slide_curr == slide_min + 1) {
                slide_prev = slide_max;
                slide_curr = slide_min;
                slide_next = slide_min + 1;
            } else if (slide_curr == slide_min) {
                slide_prev = slide_max - 1;
                slide_curr = slide_max;
                slide_next = slide_min;
            } else {
                slide_curr = slide_prev;
                slide_prev = slide_curr - 1;
                slide_next = slide_curr + 1;
            }
        } else {
            if (slide_curr == slide_max - 1) {
                slide_prev = slide_max - 1;
                slide_curr = slide_max;
                slide_next = slide_min;
            } else if (slide_curr == slide_max) {
                slide_prev = slide_max;
                slide_curr = slide_min;
                slide_next = slide_min + 1;
            } else {
                slide_curr = slide_next;
                slide_prev = slide_curr - 1;
                slide_next = slide_curr + 1;
            }
        }

    }

    function doTransition () {

        // reset the z-index vals
        $(slides).css('z-index','1');
        $(slides[slide_curr]).css('z-index', '2');

        // turn on the display of the next slide
        if (dir == 'prev') {
            $(slides[slide_prev]).css('display','block');
        } else {
            $(slides[slide_next]).css('display','block');
        }

        // fade the current slide out (to zero opacity)
        $(slides[slide_curr]).fadeOut(900);

    }

    function printSelectors () {

        var li_string = '';
        var selector_class;
        for (var i=0; i<=slide_max; i++) {
            //display_num = i+1;
            display_num = '';
            if (slide_curr == i) {
                selector_class = ' class="current"';
            } else {selector_class = '';}
            li_string = li_string + '<li id="slider_sel_'+i+'"'+selector_class+'>'+display_num+'</li>';
        }
        $('#bx_slider ul.slide-selectors').html(li_string);

        // click number selector
        $('#bx_slider ul.slide-selectors li').click(function() {

            slide_curr = $(this).index();

            clickSlide();
            $('#bx_state2').html('clicked: '+$(this).index()); // just for debugging purposes
            slideShow_play();
        });

    }

    function reClassSelectors () {
        $('#bx_slider ul.slide-selectors li').removeClass('current');
        $('#slider_sel_'+slide_curr).addClass('current');
    }

    function clickSlide (clicked_slide_index) {
        //slide_curr = clicked_slide_index;
        if (slide_curr = slide_max) {
                slide_prev = slide_curr - 1;
                slide_next = slide_min;
            } else if (slide_curr == slide_min) {
                slide_prev = slide_max;
                slide_next = slide_curr + 1;
            } else {
                slide_prev = slide_curr - 1;
                slide_next = slide_curr + 1;
            }
    }

    function slideShow_play () {

        doTransition();
        reIndex();
        reClassSelectors();
        printState();
        if (is_paused != true) {
            timeout = setTimeout(slideShow_play, interval);
        }

    }

    function slideShow_start () {

        $(slides[slide_curr]).css('display','block');
        printSelectors();
        timeout = setTimeout(slideShow_play, 3000);

    }

    // just for debugging purposes
    function printState () {

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

    }

    // set hover
    $('#bx_slider').hover(function() {
        is_paused = true;
        clearTimeout(timeout);
    }, function() {
        is_paused = false;
        dir = 'next';
        timeout = setTimeout(slideShow_play, interval);
    });

    // prev-next
    $('#bx_slider .slide-btns').click(function() {
        if ($(this).hasClass('prev')) {dir = 'prev';} else {dir = 'next';}
        slideShow_play();
    });


    // variables, initialize the settings
    var slides = $('#bx_slider .slide');
    var interval = 4000;
    var is_paused = false;
    var dir = 'next';
    var slide_min = 0;
    var slide_max = slides.length - 1;
    var slide_curr = 0;
    var slide_prev = slide_max;
    var slide_next = 1;

    // start it all off when the page loads
    slideShow_start();


});

</script>

<style type='text/css'>
    #bx_slider {
            width:922px; height:530px; margin:100px auto;
            position:relative;}
    /* slide frame */
    #bx_slider .slide {
            width:922px; height:530px;
            display:none; position:absolute; z-index:1;}
    /* slide image */
    #bx_slider .slide-pic {
            position:absolute; z-index:1;}
    /* slide caption */
    #bx_slider .slide-caption {
            position:absolute; z-index:2; left:0; bottom:0;
            background:url('caption-bg.png'); width:922px; height:60px;
            font-size:14px; line-height:60px; color:#fff; text-align:center;}
    /* buttons: prev or next */
    #bx_slider .slide-btns {
            position:absolute; z-index:2;
            width:50%; height:100%; cursor:pointer;}
    #bx_slider .slide-btns.prev {left:0; background:none;}
    #bx_slider .slide-btns.next {right:0; background:none;}
    #bx_slider .slide-btns.prev:hover {
            background:url('btn-prev.png') no-repeat left center;}
    #bx_slider .slide-btns.next:hover {
            background:url('btn-next.png') no-repeat right center;}
    /* selectors (numbers or radio buttons, etc) */
    #bx_slider ul.slide-selectors {
            margin:0; padding:0; list-style:none; height:20px; width:100%;
            position:absolute; z-index:5; top:-60px; text-align:center;}
    #bx_slider ul.slide-selectors li {
            display:inline-block; margin:10px; padding:0; 
            width:41px; height:41px; cursor:pointer;}
    #slider_sel_0 {background:url('selector-sprite.png') no-repeat 0 0;}
    #slider_sel_0.current {background-position:0 -43px;}
    #slider_sel_1 {background:url('selector-sprite.png') no-repeat -43px 0;}
    #slider_sel_1.current {background-position:-43px -43px;}
    #slider_sel_2 {background:url('selector-sprite.png') no-repeat -86px 0;}
    #slider_sel_2.current {background-position:-86px -43px;}
    #slider_sel_3 {background:url('selector-sprite.png') no-repeat -129px 0;}
    #slider_sel_3.current {background-position:-129px -43px;}
    #slider_sel_4 {background:url('selector-sprite.png') no-repeat -172px 0;}
    #slider_sel_4.current {background-position:-172px -43px;}
</style>

<div id="bx_slider">
    <div class='slide-btns prev'></div>
    <div class='slide-btns next'></div>
    <ul class='slide-selectors'></ul>
    <div class='slide'>
        <img src="slide1.jpg" class='slide-pic' />
        <div class='slide-caption'>hello world, slide one</div>
    </div>
    <div class='slide'>
        <img src="slide2.jpg" class='slide-pic' />
        <div class='slide-caption'>hello world, slide two</div>
    </div>
    <div class='slide'>
        <img src="slide3.jpg" class='slide-pic' />
        <div class='slide-caption'>hello world, slide three</div>
    </div>
    <div class='slide'>
        <img src="slide4.jpg" class='slide-pic' />
        <div class='slide-caption'>hello world, slide four</div>
    </div>
    <div class='slide'>
        <img src="slide5.jpg" class='slide-pic' />
        <div class='slide-caption'>hello world, slide five</div>
    </div>
</div><!-- #bx_slider -->

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

jQuery（文档）.ready（函数（$）{
函数重新索引（）{
如果（dir=='prev'）{
如果（滑动电流==滑动最小值+1）{
滑动前=滑动最大值；
滑动电流=滑动最小值；
幻灯片\u next=幻灯片\u min+1；
}否则如果（滑动电流==滑动最小值）{
滑动前=滑动最大值-1；
滑动电流=滑动最大值；
幻灯片\下一步=幻灯片\分钟；
}否则{
幻灯片当前=幻灯片当前；
上一张幻灯片=当前幻灯片-1；
下一张幻灯片=当前幻灯片+1；
}
}否则{
如果（滑动电流==滑动最大值-1）{
滑动前=滑动最大值-1；
滑动电流=滑动最大值；
幻灯片\下一步=幻灯片\分钟；
}否则如果（滑动电流==滑动最大值）{
滑动前=滑动最大值；
滑动电流=滑动最小值；
幻灯片\u next=幻灯片\u min+1；
}否则{
幻灯片当前=幻灯片下一步；
上一张幻灯片=当前幻灯片-1；
下一张幻灯片=当前幻灯片+1；
}
}
}
函数doTransition（）{
//重置z索引VAL
$（幻灯片）.css（'z-index'，'1'）；
$（幻灯片[slide_curr]）.css（'z-index'，'2'）；
//打开下一张幻灯片的显示
如果（dir=='prev'）{
$（幻灯片[slide_prev]）.css（'display'，'block'）；
}否则{
$（slides[slide_next]）.css（'display'，'block'）；
}
//淡入当前滑出（不透明度为零）
$（幻灯片[幻灯片]）。淡出（900）；
}
函数打印选择器（）{
变量li_字符串=“”；
var选择器&u类；
对于（var i=0；i而言，这里似乎有一个输入错误：

function clickSlide (clicked_slide_index) {
    //slide_curr = clicked_slide_index;
    if (slide_curr = slide_max) {
            slide_prev = slide_curr - 1;
            slide_next = slide_min;
        } else if (slide_curr == slide_min) {
            slide_prev = slide_max;
            slide_next = slide_curr + 1;
        } else {
            slide_prev = slide_curr - 1;
            slide_next = slide_curr + 1;
        }
}

您需要取消注释
slide\u curr=clicked\u slide\u index；
，并且需要将
（slide\u curr=slide\u max）
更改为
（slide\u curr==slide\u max）
这样您就不会用
slide\u max
的值覆盖
slide\u curr
的值。您的代码太大了，无法进行如此简单的操作。
您可以编写如下内容：

jQ:

var-stop=false，time，c=0，slidesN=$（'#bx_slider.slide'）。长度；
对于（var i=0；iThanks David。看起来这让我更接近了。它现在正在工作。谢谢你的帮助！虽然David在原始代码中发现了这个bug，但这是一个更好的例子，说明了如何使用jQuery实现目标。@RET谢谢！我刚刚发布了这个答案，向Joe和David展示了使用log编程是多么有趣和简单ical操作和预定义函数“步骤”的帮助。谢谢RET和roXon。我很感激这些建议。我将不得不阅读关于模和三元运算符的内容。我以前没有做过任何处理。
var stop=false, time, c=0, slidesN = $('#bx_slider .slide').length;
for(var i=0; i<slidesN; i++){
    $('.slide-selectors').append('<li>'+(i+1)+'</li>');
}
$('.slide-selectors li').eq(0).addClass('active');
$('.slide:gt(0)').hide();
function a(){
  $('.slide').eq(c).fadeTo(600,1).siblings('.slide').fadeTo(600,0);
  $('.slide-selectors li').eq(c).addClass('active').siblings('li').removeClass('active');
} 
function cc(){
  c = c%slidesN;
}
function aa(){
  if(stop){return;}
  clearTimeout(time);
  time = setTimeout(function(){
    c++;cc();a();aa();
  },2500);
}
aa();
$('.slide-btns').click(function() {
   btn = $(this).hasClass('prev') ? (c--, cc(), a()) : (c++, cc(), a());
});
$('#bx_slider').bind('mouseenter mouseleave', function(e) {
   me_ml = ( e.type === 'mouseenter' ) ? ( stop=true, clearTimeout(time) ) : ( stop=false, aa() );
});
$('.slide-selectors li').bind('click',function(){
  var liInd = $(this).index();
  c=liInd;cc();a();
});