Question

我正在构建一个简单的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>

以下是实时代码的链接：http://www.exit44.com/slider/

Answer 1

看起来你有一个错字：

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_curr = clicked_slide_index;，并且需要将(slide_curr = slide_max)更改为(slide_curr == slide_max)，这样您才不会使用{{1}的值覆盖slide_curr的值}。

Answer 2

你的代码对于这么简单的东西来说太庞大了。
你可以这样写：

DEMO GALLERY

JQ：

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

它是'无错误'（即使jsBin不能很好地接受三元组的编写。）如果你熟悉Modulo和Ternary运算符，它会更小，更容易调试。

jQuery Image Rotator脚本

2 个答案:

DEMO GALLERY